@factorearth/component-library 5.2.2 → 5.2.3-alpha.0

package/dist/Molecules/Thumbnail/Thumbnail.js

@@ -2,59 +2,64 @@ import React, { useState, useRef, useEffect, } from "react";
 import styled from "@emotion/styled";
 import { FiTrash2, FiEye, FiEyeOff, FiSettings } from "react-icons/fi";
 import { Button } from "../../Atoms/Buttons/Button";
-const Container = styled.div `
-	display: flex;
-	flex-direction: column;
-	align-items: end;
-	justify-content: start;
-	gap: 16px;
-	flex-shrink: 0;
-	${({ showImage }) => showImage && `height: 278px; width: 200px`}
+import { ConfirmationModal } from "../../Organisms/Modal/Modal";
+import { Spinner } from "../../Atoms/Spinner/Spinner";
+const Container = styled.div `
+	display: flex;
+	flex-direction: column;
+	align-items: end;
+	justify-content: start;
+	gap: 16px;
+	flex-shrink: 0;
+	${({ showImage }) => showImage && `height: 278px; width: 200px`}
 `;
-const InputArea = styled.div `
-	width: 150px;
-	height: 132px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background-color: ${({ colors }) => colors.background.tertiary};
-	border-style: solid;
-	border-width: 1px;
-	border-color: ${({ colors }) => colors.border.primary};
-	position: relative;
-	cursor: pointer;
-	overflow: hidden;
-	border-radius: 4px;
-	padding: 24px;
+const InputArea = styled.div `
+	width: 150px;
+	height: 132px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: ${({ colors }) => colors.background.tertiary};
+	border-style: solid;
+	border-width: 1px;
+	border-color: ${({ colors }) => colors.border.primary};
+	position: relative;
+	cursor: pointer;
+	overflow: hidden;
+	border-radius: 4px;
+	padding: 24px;
 `;
-const SettingsArea = styled.div `
-	width: 168px;
-	height: 148px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background-color: ${({ colors }) => colors.background.secondary};
-	border-style: solid;
-	border-width: 1px;
-	border-color: ${({ colors }) => colors.border.primary};
-	cursor: pointer;
-	overflow: hidden;
-	border-radius: 4px;
-	gap: 16px;
-	padding: 16px;
+const SettingsArea = styled.div `
+	width: 168px;
+	height: 148px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: ${({ colors }) => colors.background.secondary};
+	border-style: solid;
+	border-width: 1px;
+	border-color: ${({ colors }) => colors.border.primary};
+	cursor: pointer;
+	overflow: hidden;
+	border-radius: 4px;
+	gap: 16px;
+	padding: 16px;
 `;
-const PreviewImage = styled.img `
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 1;
+const PreviewImage = styled.img `
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1;
 `;
-export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showImage, setShowImage, fieldInstance, s3Key, signedUrl, uploadButtonText, handleRemove, changed, handleChange, }) => {
+export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showImage, setShowImage, fieldInstance, s3Key, signedUrl, loading, handleRemove, handleChange, }) => {
     const [selectedImage, setSelectedImage] = useState(null);
     const [showSettings, setShowSettings] = useState(false);
+    const [prevImage, setPrevImage] = useState(null);
+    const [openSubmitModal, setOpenSubmitModal] = useState(false);
+    const [deletingImage, setDeletingImage] = useState(false);
     const acceptedFileTypes = [
         "image/jpeg",
         "image/png",
@@ -68,60 +73,131 @@ export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showIm
             if (file) {
                 const imageUrl = URL.createObjectURL(file);
                 setSelectedImage(imageUrl);
+                setDeletingImage(false);
+                setPrevImage(null);
             }
         }
         else if (signedUrl && typeof signedUrl === "string") {
             setSelectedImage(signedUrl);
+            setDeletingImage(false);
+            setPrevImage(null);
         }
         else {
             setSelectedImage(null);
         }
     }, [signedUrl, s3Key]);
+    /**
+     * Handles the image upload from the input element.
+     * @param event from the input element
+     */
     const handleImageUpload = (event) => {
         const file = event.target.files?.[0];
         if (file) {
             const imageUrl = URL.createObjectURL(file);
             setSelectedImage(imageUrl);
+            setDeletingImage(false);
+            setOpenSubmitModal(true);
             handleChange(event);
         }
     };
+    /**
+     * Handles the image upload from the drag and drop event.
+     * @param event from the drag event
+     */
     const handleDrop = (event) => {
         event.preventDefault();
         const file = event.dataTransfer.files[0];
         if (file) {
             const imageUrl = URL.createObjectURL(file);
             setSelectedImage(imageUrl);
+            setOpenSubmitModal(true);
+            setDeletingImage(false);
             const dropEvent = { target: { files: event.dataTransfer.files, name: "key", type: "file" } };
             if (inputRef.current)
                 inputRef.current.files = event.dataTransfer.files;
             handleChange(dropEvent);
         }
     };
+    /**
+     * HAndles the image upload from the drag and drop event.
+     * @param event from the drag event
+     */
     const handleDragOver = (event) => {
         event.preventDefault();
+        const file = event.dataTransfer.files[0];
+        if (file) {
+            const imageUrl = URL.createObjectURL(file);
+            setSelectedImage(imageUrl);
+            setOpenSubmitModal(true);
+            setDeletingImage(false);
+            const dropEvent = { target: { files: event.dataTransfer.files, name: "key", type: "file" } };
+            if (inputRef.current)
+                inputRef.current.files = event.dataTransfer.files;
+            handleChange(dropEvent);
+        }
     };
-    const handleBrowseClick = (event) => {
+    /**
+     * Handles the click event of the browse button.
+     */
+    const handleBrowseClick = () => {
         if (inputRef && inputRef.current)
             inputRef.current.click();
     };
+    /**
+     * Handles toggling the image preview.
+     */
     const handleToggleImage = () => {
         setShowImage(!showImage);
         setShowSettings(false);
     };
+    /**
+     * Handles toggling the settings.
+     */
     const handleToggleSettings = () => {
         setShowSettings(!showSettings);
     };
+    /**
+     * Handles clearing the input and removing the image.
+     */
+    const clearInput = () => {
+        if (inputRef.current) {
+            setPrevImage(selectedImage);
+            setSelectedImage(null);
+            inputRef.current.value = "";
+        }
+        if (handleRemove) {
+            setDeletingImage(true);
+            setOpenSubmitModal(true);
+            handleRemove();
+        }
+    };
+    /**
+     * Handles the cancel click event from the modal.
+     */
+    const undoDelete = () => {
+        setSelectedImage(prevImage);
+        setOpenSubmitModal(false);
+        setDeletingImage(false);
+        setPrevImage(null);
+    };
+    /**
+     * Handles the submit click event from the modal.
+     */
+    const handleSubmitClick = async () => {
+        await handleSubmit();
+        setOpenSubmitModal(false);
+    };
     return (React.createElement(Container, { colors: colorPalette, showImage: showImage, showSettings: showSettings, key: `thumbnail_${fieldInstance.id}` },
         React.createElement("div", { style: { display: "flex" } },
             React.createElement(Button, { colorPalette: colorPalette, icon: !showImage ? React.createElement(FiEye, null) : React.createElement(FiEyeOff, null), variant: "outlined", onClick: handleToggleImage, "aria-label": !showImage ? "show-image" : "hide-image" }),
             showImage && selectedImage && (React.createElement(React.Fragment, null,
                 React.createElement(Button, { colorPalette: colorPalette, icon: React.createElement(FiSettings, null), variant: "outlined", style: { borderColor: "transparent" }, onClick: handleToggleSettings }),
-                handleRemove && (React.createElement(Button, { colorPalette: colorPalette, icon: React.createElement(FiTrash2, null), variant: "destructive", onClick: handleRemove }))))),
+                React.createElement(Button, { colorPalette: colorPalette, icon: React.createElement(FiTrash2, null), variant: "destructive", onClick: clearInput })))),
         showImage && !showSettings && (React.createElement(InputArea, { onDrop: handleDrop, onDragOver: handleDragOver, colors: colorPalette },
             selectedImage && (React.createElement(PreviewImage, { alt: s3Key || "Uploaded Image", src: selectedImage })),
             React.createElement(Button, { colorPalette: colorPalette, label: "Browse", variant: "filled", onClick: handleBrowseClick },
                 React.createElement("input", { type: "file", name: "key", accept: acceptedFileTypes.join(","), onChange: handleImageUpload, ref: inputRef, id: `upload-image-${fieldInstance.id}`, multiple: false, style: { display: "none" } })))),
         showSettings && showImage && (React.createElement(SettingsArea, { colors: colorPalette }, settingsChildren)),
-        changed && (React.createElement(Button, { colorPalette: colorPalette, onClick: handleSubmit, variant: "filled", style: { margin: "0 auto" } }, uploadButtonText))));
+        React.createElement(ConfirmationModal, { colorPalette: colorPalette, setOpen: undoDelete, details: React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%" } }, loading ? (React.createElement(Spinner, { colorPalette: colorPalette })) : (React.createElement("img", { alt: s3Key || "Uploaded Image", src: selectedImage ?? (prevImage ?? ""), style: { width: "150px", height: "132px" } }))), confirmTitle: `Are you sure you want to ${deletingImage ? "delete this image" : "upload this image"}?`, handleSubmit: handleSubmitClick, open: openSubmitModal })));
 };
 //# sourceMappingURL=Thumbnail.js.map

package/dist/Molecules/Thumbnail/Thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../lib/Molecules/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../lib/Molecules/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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"}

package/dist/Organisms/Card/Card.js

@@ -1,41 +1,41 @@
 import React, { forwardRef } from "react";
 import styled from "@emotion/styled";
-const CardContainer = styled.div `
-	padding: 24px;
-	border-width: 0.5px;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.border.primary};
-	border-right: none;
-	border-left: none;
+const CardContainer = styled.div `
+	padding: 24px;
+	border-width: 0.5px;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.border.primary};
+	border-right: none;
+	border-left: none;
 `;
-const FieldsXThumbnailSection = styled.section `
-	display: flex;
-	justify-content: space-between;
-	flex-direction: row-reverse;
-	@media (max-width: 600px) {
-		flex-direction: column;
-		align-items: flex-end;
-	}
-
-	:has(div > div > button[aria-label="show-image"]) {
-		flex-direction: column;
-	}
+const FieldsXThumbnailSection = styled.section `
+	display: flex;
+	justify-content: space-between;
+	flex-direction: row-reverse;
+	@media (max-width: 600px) {
+		flex-direction: column;
+		align-items: flex-end;
+	}
+
+	:has(div > div > button[aria-label="show-image"]) {
+		flex-direction: column;
+	}
 `;
-const ThumbnailSectionFields = styled.section `
-	padding: 16px 24px 0px 0px;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	width: 100%;
-	@media (max-width: 600px) {
-		padding: 16px 0px 0px 24px;
-	}
+const ThumbnailSectionFields = styled.section `
+	padding: 16px 24px 0px 0px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	width: 100%;
+	@media (max-width: 600px) {
+		padding: 16px 0px 0px 24px;
+	}
 `;
-const ButtonContainer = styled.div `
-	display: flex;
-	justify-content: flex-end;
-	gap: 24px;
-	padding-top: 24px;
+const ButtonContainer = styled.div `
+	display: flex;
+	justify-content: flex-end;
+	gap: 24px;
+	padding-top: 24px;
 `;
 export const Card = forwardRef((props, ref) => {
     const { colorPalette, thumbnail, thumbnailSectionFields, remainingFields, buttons, } = props;

package/dist/Organisms/EditUserPerms/EditUserPerms.js

@@ -6,82 +6,82 @@ import Badge from "../../Atoms/Badge/Badge";
 import { DropdownSelect } from "../../Atoms/DropdownField/DropdownField";
 import { FieldWrapper } from "../../Atoms/FieldWrapper/FieldWrapper";
 import { TextFieldWrapper } from "../../Atoms/TextField/TextField";
-const Container = styled.div `
-	display: flex;
-	padding: 16px 24px;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 8px;
-	align-self: stretch;
-	border-radius: var(--Border-Radius-border-radius-md, 8px);
-	border: 0.5px solid var(--colors-border-secondary, #DCDEE0);
-	background: ${({ colorPalette }) => colorPalette.background.primary};
+const Container = styled.div `
+	display: flex;
+	padding: 16px 24px;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 8px;
+	align-self: stretch;
+	border-radius: var(--Border-Radius-border-radius-md, 8px);
+	border: 0.5px solid var(--colors-border-secondary, #DCDEE0);
+	background: ${({ colorPalette }) => colorPalette.background.primary};
 `;
-const Created = styled.div `
-	display: flex;
-	padding: 0px 8px;
-	gap: 8px;
-	width: 100%;
+const Created = styled.div `
+	display: flex;
+	padding: 0px 8px;
+	gap: 8px;
+	width: 100%;
 `;
-const BadgeContainer = styled.div `
-	padding-top: 2px;
+const BadgeContainer = styled.div `
+	padding-top: 2px;
 `;
-const CreatedText = styled.p `
-	margin: 0px;
-	padding-top: 8px;
-	color: ${({ colorPalette }) => colorPalette.text.primary}
+const CreatedText = styled.p `
+	margin: 0px;
+	padding-top: 8px;
+	color: ${({ colorPalette }) => colorPalette.text.primary}
 `;
-const DropdownContainer = styled.div `
-	width: 100%;
-	display: flex;
-	padding: 0px 8px 8px 8px;
-	flex-direction: column;
+const DropdownContainer = styled.div `
+	width: 100%;
+	display: flex;
+	padding: 0px 8px 8px 8px;
+	flex-direction: column;
 `;
-const RoleDescriptionContainer = styled.div `
-	display: flex;
-	flex-direction: column
+const RoleDescriptionContainer = styled.div `
+	display: flex;
+	flex-direction: column
 `;
-const RoleDescriptionParagraph = styled.p `
-	font-size: 14px;
-	font-style: italic;
-	font-weight: 400;
-	line-height: 20px;
-	margin: 0px;
-	color: ${({ colorPalette }) => colorPalette.text.primary}
+const RoleDescriptionParagraph = styled.p `
+	font-size: 14px;
+	font-style: italic;
+	font-weight: 400;
+	line-height: 20px;
+	margin: 0px;
+	color: ${({ colorPalette }) => colorPalette.text.primary}
 `;
-const RoleNameParagraph = styled.h2 `
-	font-size: 14px;
-	font-style: italic;
-	font-weight: 700;
-	line-height: 20px;
-	margin: 0px;
-	color: ${({ colorPalette }) => colorPalette.text.primary}
+const RoleNameParagraph = styled.h2 `
+	font-size: 14px;
+	font-style: italic;
+	font-weight: 700;
+	line-height: 20px;
+	margin: 0px;
+	color: ${({ colorPalette }) => colorPalette.text.primary}
 `;
-const EmailWrapper = styled.div `
-	width: 100%;
-	min-width: 60px;
-	min-height: 30px;
-	height: 38px;
-	border-radius: 4px;
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.background.disabledInput};
-	background-color: ${({ colorPalette }) => colorPalette.background.disabledInput};
+const EmailWrapper = styled.div `
+	width: 100%;
+	min-width: 60px;
+	min-height: 30px;
+	height: 38px;
+	border-radius: 4px;
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.background.disabledInput};
+	background-color: ${({ colorPalette }) => colorPalette.background.disabledInput};
 `;
-const PseudoInput = styled.div `
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 16px;
-	font-weight: 600;
-	font-size: 16px;
-	display: flex;
-	padding: 3px 12px 3px 16px;
-	cursor: default;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
-	::placeholder {
-		font-weight: 500;
-	}
+const PseudoInput = styled.div `
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	font-weight: 600;
+	font-size: 16px;
+	display: flex;
+	padding: 3px 12px 3px 16px;
+	cursor: default;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+	::placeholder {
+		font-weight: 500;
+	}
 `;
 export function EditUserPerms(props) {
     const { user, handleChange, roles, theme } = props;

package/dist/Organisms/ErrorSplash/ErrorSplash.js

@@ -3,44 +3,44 @@ import styled from "@emotion/styled";
 import { FiRefreshCw } from "react-icons/fi";
 import { Button } from "../../Atoms/Buttons/Button";
 import { Typography } from "../../Atoms/Typography/Typography";
-const ErrorSplashContainer = styled.div `
-	background-color: ${({ colorPalette }) => colorPalette.background.primary};
-	display: flex;
-	flex-direction: column;
-	align-self: stretch;
-	flex-grow: 1;
+const ErrorSplashContainer = styled.div `
+	background-color: ${({ colorPalette }) => colorPalette.background.primary};
+	display: flex;
+	flex-direction: column;
+	align-self: stretch;
+	flex-grow: 1;
 `;
-const HeaderDiv = styled.div `
-	padding: 24px;
-	flex-direction: column;
-	align-items: center;
-	gap: 16px;
-	align-self: stretch;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
-	border-width: 0 0 1px 0;
-	border-style: solid;
-	text-align: center;
-	border-color: ${({ colorPalette }) => colorPalette.background.secondary};
+const HeaderDiv = styled.div `
+	padding: 24px;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+	align-self: stretch;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+	border-width: 0 0 1px 0;
+	border-style: solid;
+	text-align: center;
+	border-color: ${({ colorPalette }) => colorPalette.background.secondary};
 `;
-const DescriptionDiv = styled.div `
-	margin-top: 24px;
-	text-align: center;
+const DescriptionDiv = styled.div `
+	margin-top: 24px;
+	text-align: center;
 `;
-const BackgroundDiv = styled.div `
-	display: flex;
-	height: 245px;
-	justify-content: center;
-	align-items: center;
-	align-content: center;
-	gap: 16px;
-	flex-shrink: 0;
-	align-self: stretch;
-	flex-wrap: wrap;
-	flex-grow: 1;
-	background-image: ${({ backgroundImage }) => `url(${backgroundImage})`};
-	backgroundSize: cover;
-	backgroundRepeat: no-repeat;
-	overflowY: auto;
+const BackgroundDiv = styled.div `
+	display: flex;
+	height: 245px;
+	justify-content: center;
+	align-items: center;
+	align-content: center;
+	gap: 16px;
+	flex-shrink: 0;
+	align-self: stretch;
+	flex-wrap: wrap;
+	flex-grow: 1;
+	background-image: ${({ backgroundImage }) => `url(${backgroundImage})`};
+	backgroundSize: cover;
+	backgroundRepeat: no-repeat;
+	overflowY: auto;
 `;
 // This will replace the ContactContainer when we have the ambassador program set up
 // const AmbassadorContactDiv = styled.div<{ colorPalette: Colors }>`
@@ -53,15 +53,15 @@ const BackgroundDiv = styled.div `
 // 	gap: 16px;
 // 	align-self: stretch;
 // `;
-const ContactContainer = styled.div `
-  background-color: ${({ colors }) => colors.background.tertiary};
-  color: ${({ colors }) => colors.text.primary};
-  display: flex;
-  padding: 24px 16px;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  align-self: stretch;
+const ContactContainer = styled.div `
+  background-color: ${({ colors }) => colors.background.tertiary};
+  color: ${({ colors }) => colors.text.primary};
+  display: flex;
+  padding: 24px 16px;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
 `;
 export const ErrorSplash = (props) => {
     const { colorPalette, title, description, image, backgroundImage, errorMessage, refreshOnClick, ...tableHtmlProps } = props;