@mailstep/design-system 0.6.21 → 0.6.23

package/README.md

@@ -2,6 +2,8 @@
 
 Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook 
 
+Powered by chromatic: https://www.chromatic.com/library?appId=664c5032c1e55e80a74fcfd2&branch=master 
+
 ## Peer dependencies
 - @xstyled/styled-components
 - styled-component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.21",
+  "version": "0.6.23",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -24,6 +24,7 @@
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@chromatic-com/storybook": "^1",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
@@ -34,14 +35,15 @@
     "@lingui/core": "3.17.2",
     "@lingui/react": "3.17.2",
     "@popperjs/core": "^2.11.8",
-    "@storybook/addon-controls": "7.6.8",
-    "@storybook/addon-essentials": "7.6.8",
-    "@storybook/addon-interactions": "7.6.8",
-    "@storybook/addon-links": "7.6.8",
-    "@storybook/blocks": "7.6.8",
-    "@storybook/react": "7.6.8",
-    "@storybook/react-webpack5": "7.6.8",
-    "@storybook/testing-library": "0.2.2",
+    "@storybook/addon-controls": "^8.1.1",
+    "@storybook/addon-designs": "^8.0.2",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-interactions": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/blocks": "^8.1.1",
+    "@storybook/react": "^8.1.1",
+    "@storybook/react-webpack5": "^8.1.1",
+    "@storybook/test": "^8.1.1",
     "@svgr/rollup": "^8.0.1",
     "@types/faker": "^4.1.11",
     "@types/luxon": "^3.4.2",
@@ -59,7 +61,7 @@
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "chromatic": "^11.3.5",
-    "eslint-plugin-storybook": "0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "faker": "^5.1.0",
     "immer": "9.0.7",
     "lodash": "^4.17.21",
@@ -81,7 +83,7 @@
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
     "reselect": "5.0.0-alpha.2",
-    "storybook": "7.6.8",
+    "storybook": "^8.1.1",
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",

package/ui/Blocks/CornerDialog/stories/CornerDialog.stories.js

@@ -19,6 +19,7 @@ export var InfoCornerDialog = {
         statusToTitle: statusToTitle,
         intent: 'info',
         isOpen: true,
+        onClose: console.log
     },
 };
 export var SuccessCornerDialog = {
@@ -28,6 +29,7 @@ export var SuccessCornerDialog = {
         statusToTitle: statusToTitle,
         intent: 'success',
         isOpen: true,
+        onClose: console.log
     },
 };
 export var ErrorCornerDialog = {
@@ -37,6 +39,7 @@ export var ErrorCornerDialog = {
         statusToTitle: statusToTitle,
         intent: 'error',
         isOpen: true,
+        onClose: console.log
     },
 };
 export var WarningCornerDialog = {
@@ -46,5 +49,6 @@ export var WarningCornerDialog = {
         statusToTitle: statusToTitle,
         intent: 'warning',
         isOpen: true,
+        onClose: console.log
     },
 };

package/ui/Blocks/LightBox/stories/LightBox.stories.js

@@ -15,6 +15,7 @@ var images = [
 export var LightBoxDefault = {
     args: {
         images: images,
-        isLightBoxOpen: true
+        isLightBoxOpen: true,
+        onCloseLightBox: console.log
     },
 };

package/ui/Elements/Button/stories/Button.stories.d.ts

@@ -5,6 +5,12 @@ declare const meta: {
     component: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, buttonRef, onClick, ...props }: import("../types").Props) => JSX.Element;
     tags: string[];
     argTypes: {};
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/ui/Elements/Button/stories/Button.stories.js

@@ -4,6 +4,12 @@ var meta = {
     component: Button,
     tags: ['autodocs'],
     argTypes: {},
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2Fwdpl2dchqnNHAsbuoRDXjb%2FElements%3Fnode-id%3D979%253A2939%26t%3DNHB5soSntRqtsFN0-1',
+        },
+    },
 };
 export default meta;
 export var DefaultPrimary = {

package/ui/Elements/DatePicker/DatePicker.d.ts

@@ -15,6 +15,7 @@ export type DatePickerType = DatetimepickerProps & {
     error?: string;
     icon?: boolean;
     onClear?: () => void;
+    onInputChange?: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ name, value, initialViewDate, error, label, disabled, isValidDate, onChange, dateFormat, timeFormat, open, secondValue, input, icon, showInputLabel, showCalendarLabel, spaceAround, className, onClear, ...passProps }: DatePickerType) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ name, value, initialViewDate, error, label, disabled, isValidDate, onChange, dateFormat, timeFormat, open, secondValue, input, icon, showInputLabel, showCalendarLabel, spaceAround, className, onClear, onInputChange, ...passProps }: DatePickerType) => JSX.Element>;
 export default _default;

package/ui/Elements/DatePicker/DatePicker.js

@@ -37,13 +37,13 @@ import Input from '../../Forms/Input';
 import { LanguageContext } from '../../ThemeProvider/ThemeProvider';
 var defaultDateFormat = 'DD.MM.YYYY';
 var DatePicker = function (_a) {
-    var name = _a.name, value = _a.value, initialViewDate = _a.initialViewDate, error = _a.error, label = _a.label, disabled = _a.disabled, isValidDate = _a.isValidDate, onChange = _a.onChange, _b = _a.dateFormat, dateFormat = _b === void 0 ? defaultDateFormat : _b, _c = _a.timeFormat, timeFormat = _c === void 0 ? false : _c, open = _a.open, _d = _a.secondValue, secondValue = _d === void 0 ? null : _d, input = _a.input, _e = _a.icon, icon = _e === void 0 ? true : _e, _f = _a.showInputLabel, showInputLabel = _f === void 0 ? false : _f, _g = _a.showCalendarLabel, showCalendarLabel = _g === void 0 ? true : _g, _h = _a.spaceAround, spaceAround = _h === void 0 ? false : _h, className = _a.className, onClear = _a.onClear, passProps = __rest(_a, ["name", "value", "initialViewDate", "error", "label", "disabled", "isValidDate", "onChange", "dateFormat", "timeFormat", "open", "secondValue", "input", "icon", "showInputLabel", "showCalendarLabel", "spaceAround", "className", "onClear"]);
+    var name = _a.name, value = _a.value, initialViewDate = _a.initialViewDate, error = _a.error, label = _a.label, disabled = _a.disabled, isValidDate = _a.isValidDate, onChange = _a.onChange, _b = _a.dateFormat, dateFormat = _b === void 0 ? defaultDateFormat : _b, _c = _a.timeFormat, timeFormat = _c === void 0 ? false : _c, open = _a.open, _d = _a.secondValue, secondValue = _d === void 0 ? null : _d, input = _a.input, _e = _a.icon, icon = _e === void 0 ? true : _e, _f = _a.showInputLabel, showInputLabel = _f === void 0 ? false : _f, _g = _a.showCalendarLabel, showCalendarLabel = _g === void 0 ? true : _g, _h = _a.spaceAround, spaceAround = _h === void 0 ? false : _h, className = _a.className, onClear = _a.onClear, onInputChange = _a.onInputChange, passProps = __rest(_a, ["name", "value", "initialViewDate", "error", "label", "disabled", "isValidDate", "onChange", "dateFormat", "timeFormat", "open", "secondValue", "input", "icon", "showInputLabel", "showCalendarLabel", "spaceAround", "className", "onClear", "onInputChange"]);
     var format = "".concat(dateFormat).concat(timeFormat ? " ".concat(timeFormat) : "");
-    var isValid = !!value && moment(value, format).isValid();
+    var isValid = !!value && moment(value, format, true).isValid();
     var stringValue = isValid ? moment(value, format).format(format) : value;
     var locale = useContext(LanguageContext);
     var handleRenderInput = useCallback(function (_, openCalendar) {
-        return (_jsx(Input, { type: "text", icon: icon ? 'calendar' : undefined, name: name, error: error, disabled: disabled, isInvalid: !!error, label: showInputLabel ? label : undefined, value: stringValue, onFocus: openCalendar, iconOnClick: openCalendar, onClear: onClear }));
+        return (_jsx(Input, { type: "text", icon: icon ? 'calendar' : undefined, name: name, error: error, disabled: disabled, isInvalid: !!error, onChange: onInputChange, label: showInputLabel ? label : undefined, value: stringValue, onFocus: openCalendar, iconOnClick: openCalendar, onClear: onClear }));
     }, [name, stringValue, error, label, showInputLabel, isValid, disabled]);
     var handleRenderView = useCallback(function (_, renderCalendar) {
         if (label && !showInputLabel) {

package/ui/Elements/Dropdown/Dropdown.js

@@ -12,17 +12,17 @@ var Arrow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObj
     return (verticalShift ? 'calc(50% + 70px)' : 'calc(50%)');
 }, ArrowInnerA, ArrowInnerB, th.color('white'));
 var StyledDropdownWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n\n  ", "\n\n  width: fit-content;\n  height: fit-content;\n  display: block;\n  z-index: 1;\n\n  ", " {\n    display: ", ";\n  }\n"], ["\n  position: absolute;\n\n  ", "\n\n  width: fit-content;\n  height: fit-content;\n  display: block;\n  z-index: 1;\n\n  ", " {\n    display: ", ";\n  }\n"])), function (_a) {
-    var customDropdownPosition = _a.customDropdownPosition, verticalShift = _a.verticalShift;
+    var customDropdownPosition = _a.customDropdownPosition;
     return customDropdownPosition
         ? customDropdownPosition
-        : "\n      top: 100%;\n      left: ".concat(verticalShift ? 'calc(50% - 72px)' : 'calc(50%)', ";\n      transform: translate(-50%, 0);\n    ");
+        : "\n      top: 100%;\n      right: 0;\n    ";
 }, Arrow, function (_a) {
     var showArrow = _a.showArrow;
     return (showArrow ? 'block' : 'none');
 });
 var Dropdown = function (_a) {
     var show = _a.show, className = _a.className, wrapRef = _a.wrapRef, children = _a.children, showArrow = _a.showArrow, verticalShift = _a.verticalShift, customDropdownPosition = _a.customDropdownPosition;
-    return (_jsx(_Fragment, { children: show && (_jsxs(StyledDropdownWrap, { ref: wrapRef, className: className, showArrow: showArrow, verticalShift: verticalShift, customDropdownPosition: customDropdownPosition, children: [_jsx(Arrow, { verticalShift: verticalShift, children: _jsx(ArrowInnerA, { children: _jsx(ArrowInnerB, {}) }) }), children] })) }));
+    return (_jsx(_Fragment, { children: show && (_jsxs(StyledDropdownWrap, { ref: wrapRef, className: className, showArrow: showArrow, customDropdownPosition: customDropdownPosition, children: [_jsx(Arrow, { verticalShift: verticalShift, children: _jsx(ArrowInnerA, { children: _jsx(ArrowInnerB, {}) }) }), children] })) }));
 };
 export default Dropdown;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Elements/DropdownMenu/components/DefaultItem.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from '@xstyled/styled-components';
-var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 10px;\n  font-size: 12px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 10px;\n  font-size: 12px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
+var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
     return props.hasSeparator && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-top: slim;\n      border-color: lightGray2;\n    "], ["\n      border-top: slim;\n      border-color: lightGray2;\n    "])));
 });
 var IconWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));

package/ui/Elements/Icon/stories/BadgeIcon.stories.d.ts

@@ -5,7 +5,7 @@ declare const meta: {
     component: ({ badge, ...iconProps }: {
         badge: "warning";
     } & import("..").IconProps) => JSX.Element;
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, {
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-bf5e6555").R, {
         badge: "warning";
         icon: string;
         style?: "normal" | "light" | "solid" | undefined;