@mailstep/design-system 0.11.0 → 0.11.1

package/package.json

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

package/ui/Blocks/ImageList/components/AddPhoto/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const IMAGE_MIME_PREFIX = "image/";
+export declare const INVALID_FORMAT_MESSAGE = "Unsupported file format";

package/ui/Blocks/ImageList/components/AddPhoto/constants.js

@@ -0,0 +1,5 @@
+//#region packages/ui/Blocks/ImageList/components/AddPhoto/constants.ts
+const IMAGE_MIME_PREFIX = "image/";
+const INVALID_FORMAT_MESSAGE = "Unsupported file format";
+//#endregion
+export { IMAGE_MIME_PREFIX, INVALID_FORMAT_MESSAGE };

package/ui/Blocks/ImageList/components/AddPhoto/hooks/useImageUpload.d.ts

@@ -0,0 +1,11 @@
+import { type ChangeEvent } from 'react';
+import { type ImageUploadProps } from '../../../types';
+type Props = {
+    onImageUpload?: (props: ImageUploadProps) => Promise<void>;
+};
+type HookType = (props: Props) => {
+    handleImageUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+    hasInvalidFormat: boolean;
+};
+export declare const useImageUpload: HookType;
+export {};

package/ui/Blocks/ImageList/components/AddPhoto/hooks/useImageUpload.js

@@ -0,0 +1,34 @@
+import "../constants.js";
+import { useCallback, useState } from "react";
+//#region packages/ui/Blocks/ImageList/components/AddPhoto/hooks/useImageUpload.ts
+const useImageUpload = ({ onImageUpload }) => {
+	const [hasInvalidFormat, setHasInvalidFormat] = useState(false);
+	return {
+		handleImageUpload: useCallback((event) => {
+			const input = event.target;
+			const file = input?.files?.[0];
+			if (!file) {
+				setHasInvalidFormat(false);
+				return;
+			}
+			if (!file.type.startsWith("image/")) {
+				input.value = "";
+				setHasInvalidFormat(true);
+				return;
+			}
+			setHasInvalidFormat(false);
+			const reader = new FileReader();
+			reader.readAsDataURL(file);
+			reader.onload = async () => {
+				await onImageUpload?.({
+					base64image: reader.result?.split(",").pop(),
+					base64WithDataDeclaration: reader.result,
+					file
+				});
+			};
+		}, [onImageUpload]),
+		hasInvalidFormat
+	};
+};
+//#endregion
+export { useImageUpload };

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

@@ -1,9 +1,9 @@
 import { type FC } from 'react';
 import { type ImageUploadProps } from '../../types';
-interface AddPhotoProps {
+type AddPhotoProps = {
     onImageUpload?: (props: ImageUploadProps) => Promise<void>;
     isDisabled?: boolean;
     hasRemove?: boolean;
-}
+};
 export declare const AddPhoto: FC<AddPhotoProps>;
 export {};

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

@@ -1,29 +1,15 @@
 import { AddPhoto as AddPhoto$1 } from "../../../../Elements/Icon/icons/AddPhoto.js";
-import { Container, HiddenInput } from "./styles.js";
-import { useCallback } from "react";
+import ErrorMessage from "../../../../Elements/ErrorMessage/ErrorMessage.js";
+import "../../../../Elements/ErrorMessage/index.js";
+import "./constants.js";
+import { useImageUpload } from "./hooks/useImageUpload.js";
+import { Container, ErrorWrapper, HiddenInput, Wrapper } from "./styles.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/ImageList/components/AddPhoto/index.tsx
-const IMAGE_MIME_PREFIX = "image/";
 const AddPhoto = ({ onImageUpload, isDisabled, hasRemove }) => {
-	const handleImageUpload = useCallback((event) => {
-		const input = event.target;
-		const file = input?.files?.[0];
-		if (!file?.type.startsWith(IMAGE_MIME_PREFIX)) {
-			input.value = "";
-			return;
-		}
-		const reader = new FileReader();
-		reader.readAsDataURL(file);
-		reader.onload = async () => {
-			await onImageUpload?.({
-				base64image: reader.result?.split(",").pop(),
-				base64WithDataDeclaration: reader.result,
-				file
-			});
-		};
-	}, [onImageUpload]);
+	const { handleImageUpload, hasInvalidFormat } = useImageUpload({ onImageUpload });
 	if (!onImageUpload) return null;
-	return /* @__PURE__ */ jsxs(Container, {
+	return /* @__PURE__ */ jsxs(Wrapper, { children: [/* @__PURE__ */ jsxs(Container, {
 		isDisabled,
 		hasRemove,
 		children: [/* @__PURE__ */ jsx(HiddenInput, {
@@ -36,7 +22,13 @@ const AddPhoto = ({ onImageUpload, isDisabled, hasRemove }) => {
 			width: "36",
 			height: "36"
 		})]
-	});
+	}), hasInvalidFormat && /* @__PURE__ */ jsx(ErrorWrapper, {
+		hasRemove,
+		children: /* @__PURE__ */ jsx(ErrorMessage, {
+			appearance: "inline",
+			children: "Unsupported file format"
+		})
+	})] });
 };
 //#endregion
 export { AddPhoto };

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

@@ -3,3 +3,7 @@ export declare const Container: import("styled-components").StyledComponent<"div
     hasRemove?: boolean;
 }, never>;
 export declare const HiddenInput: import("styled-components").StyledComponent<"input", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ErrorWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    hasRemove?: boolean;
+}, never>;

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

@@ -26,5 +26,17 @@ const HiddenInput = styled$1.input`
   height: 100%;
   cursor: pointer;
 `;
+const Wrapper = styled$1.div`
+  position: relative;
+  flex-shrink: 0;
+`;
+const ErrorWrapper = styled$1.div`
+  position: absolute;
+  top: ${({ hasRemove }) => hasRemove ? "100px" : "85px"};
+  left: 0;
+  width: 85px;
+  line-height: 1.2;
+  text-align: center;
+`;
 //#endregion
-export { Container, HiddenInput };
+export { Container, ErrorWrapper, HiddenInput, Wrapper };