@mailstep/design-system 0.6.80-beta.1 → 0.6.80-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.80-beta.1",
+  "version": "0.6.80-beta.2",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/ImageList/ImageList.js

@@ -15,15 +15,17 @@ import { useDraggable } from 'react-use-draggable-scroll';
 import LightBox, { useLightBox } from '../LightBox';
 import { AddPhoto } from './components/AddPhoto';
 import { ImageElement } from './components/ImageElement';
+import { useOnElementClick } from './hooks/useOnElementClick';
 import { x } from '@xstyled/styled-components';
 import { ImageListContainer } from './styles';
 export var ImageList = function (_a) {
-    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, onImageClick = _a.onImageClick, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, isDisabled = _a.isDisabled;
+    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, onImageClick = _a.onImageClick, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, isDisabled = _a.isDisabled, selectable = _a.selectable;
     var ref = useRef();
     var events = useDraggable(ref, { isMounted: !!(images === null || images === void 0 ? void 0 : images.length) }).events;
     var _b = useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;
+    var _c = useOnElementClick({ onImageClick: onImageClick, onOpenLightBox: onOpenLightBox, selectable: selectable }), handleOnClick = _c.handleOnClick, selected = _c.selected;
     return (_jsxs(x.div, { display: "flex", alignItems: "flex-end", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled }), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
                     var _a, _b;
-                    return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onClick: onImageClick ? onImageClick(item) : onOpenLightBox(index), isDisabled: isDisabled, label: item === null || item === void 0 ? void 0 : item.label }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
+                    return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onClick: handleOnClick(item, index), isDisabled: isDisabled, label: item === null || item === void 0 ? void 0 : item.label, selected: index === selected }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
                 }) }))), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
 };

package/ui/Blocks/ImageList/components/ImageElement/index.d.ts

@@ -5,6 +5,7 @@ interface ImageElementProps {
     onClick: () => void;
     imageUrl: string | undefined;
     isDisabled?: boolean;
+    selected?: boolean;
 }
 export declare const ImageElement: FC<ImageElementProps>;
 export {};

package/ui/Blocks/ImageList/components/ImageElement/index.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Image } from './styles';
-import { ImageTag } from '../ImageTag';
 import { CloseButton } from '../CloseButton';
-import { x } from '@xstyled/styled-components';
+import { ImageTag } from '../ImageTag';
+import { Image, ImageWrapper } from './styles';
 export var ImageElement = function (_a) {
-    var label = _a.label, onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled, onClick = _a.onClick, imageUrl = _a.imageUrl;
+    var label = _a.label, onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled, onClick = _a.onClick, imageUrl = _a.imageUrl, selected = _a.selected;
     if (!imageUrl)
         return null;
-    return (_jsxs(x.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", h: "100px", children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onClick }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
+    return (_jsxs(ImageWrapper, { children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onClick, selected: selected }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
 };

package/ui/Blocks/ImageList/components/ImageElement/styles.d.ts

@@ -1,2 +1,5 @@
 export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Image: import("styled-components").StyledComponent<"img", import("@xstyled/system").Theme, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", import("@xstyled/system").Theme, {
+    selected?: boolean | undefined;
+}, never>;
+export declare const ImageWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/ImageList/components/ImageElement/styles.js

@@ -2,7 +2,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { th } from '@xstyled/styled-components';
+import styled from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
 export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), th.radius('lg'));
-var templateObject_1, templateObject_2;
+export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: ", ";\n  border: ", ";\n  border-color: red1;\n  cursor: pointer;\n"], ["\n  border-radius: ", ";\n  border: ", ";\n  border-color: red1;\n  cursor: pointer;\n"])), th.radius('lg'), function (_a) {
+    var selected = _a.selected;
+    return (selected ? "3px solid" : '0');
+});
+export var ImageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding-right: 15px;\n  padding-top: 15px;\n  width: 100px;\n  height: 100px;\n"], ["\n  position: relative;\n  padding-right: 15px;\n  padding-top: 15px;\n  width: 100px;\n  height: 100px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/ImageList/hooks/useOnElementClick.d.ts

@@ -0,0 +1,12 @@
+import { type ImageData } from '../../LightBox';
+type Props = {
+    onImageClick?: (item: ImageData) => void;
+    onOpenLightBox: (index: number) => void;
+    selectable?: boolean;
+};
+type HookType = (props: Props) => {
+    handleOnClick: (item: ImageData, index: number) => () => void;
+    selected: number;
+};
+export declare const useOnElementClick: HookType;
+export {};

package/ui/Blocks/ImageList/hooks/useOnElementClick.js

@@ -0,0 +1,20 @@
+import { useCallback, useState } from 'react';
+export var useOnElementClick = function (_a) {
+    var onImageClick = _a.onImageClick, onOpenLightBox = _a.onOpenLightBox, selectable = _a.selectable;
+    var _b = useState(-1), selected = _b[0], setSelected = _b[1];
+    var handleOnClick = useCallback(function (item, index) { return function () {
+        if (onImageClick) {
+            onImageClick(item);
+        }
+        else {
+            onOpenLightBox(index);
+        }
+        if (selectable) {
+            setSelected(index);
+        }
+    }; }, [onImageClick, onOpenLightBox]);
+    return {
+        handleOnClick: handleOnClick,
+        selected: selected
+    };
+};

package/ui/Blocks/ImageList/stories/ImageList.stories.d.ts

@@ -11,3 +11,4 @@ type Story = StoryObj<typeof meta>;
 export declare const ImageListDefault: Story;
 export declare const ImageListDisabled: Story;
 export declare const ImageListWithItemDescription: Story;
+export declare const ImageListSelectable: Story;

package/ui/Blocks/ImageList/stories/ImageList.stories.js

@@ -19,7 +19,7 @@ var meta = {
 export default meta;
 var images = [
     { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
-    { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
+    { id: '2', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
 ];
 export var ImageListDefault = {
     args: {
@@ -39,3 +39,9 @@ export var ImageListWithItemDescription = {
         images: images.map(function (img) { return (__assign(__assign({}, img), { label: 'Lorem Ipsum', date: '24.12.2024', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur explicabo harum' })); }),
     },
 };
+export var ImageListSelectable = {
+    args: {
+        images: images,
+        selectable: true,
+    },
+};

package/ui/Blocks/ImageList/types.d.ts

@@ -8,8 +8,9 @@ export interface ImageListProps {
     images: ImageData[] | undefined;
     onImageUpload?: (props: ImageUploadProps) => Promise<void>;
     onImageRemove?: (id?: string) => () => void;
-    onImageClick?: (item?: ImageData) => () => void;
+    onImageClick?: (item: ImageData) => void;
     lightBoxAction?: (id?: string) => () => Promise<void>;
     lightBoxActionTitle?: string;
     isDisabled?: boolean;
+    selectable?: boolean;
 }

package/ui/Elements/Text/types.d.ts

@@ -5,6 +5,7 @@ export type TextProps = {
     fontSize?: string | number;
     fontWeight?: string;
     fontFamily?: string;
+    textAlign?: string;
     variant?: TextVariant;
     mt?: string | number;
     mr?: string | number;