@factorearth/component-library 5.3.0 → 5.3.1-alpha.0

package/dist/Atoms/Toggle/Toggle.js

@@ -1,17 +1,17 @@
 import styled from "@emotion/styled";
 import React, { useState } from 'react';
-const ToggleLabel = styled.div `
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 21px; 
-  color: ${({ colorPalette }) => colorPalette.text.primary};
-  text-align: right;
+const ToggleLabel = styled.div `
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 21px; 
+  color: ${({ colorPalette }) => colorPalette.text.primary};
+  text-align: right;
 `;
-const ToggleIcon = styled.div `
-  width: 16px;
-  height: 16px; 
-  color: ${({ colorPalette }) => colorPalette.text.primary};
+const ToggleIcon = styled.div `
+  width: 16px;
+  height: 16px; 
+  color: ${({ colorPalette }) => colorPalette.text.primary};
 `;
 const Toggle = (props) => {
     const { modes, setState, colorPalette, state, ...htmlProps } = props;

package/dist/Atoms/Typography/Typography.js

@@ -1,13 +1,13 @@
 import styled from "@emotion/styled";
 import React from "react";
 import tokens from "../../Theme/tokens.json";
-const StyledText = styled.p `
-	color: ${({ textColor }) => textColor};
-	font-size: ${({ text }) => text.fontSize};
-	line-height: ${({ text }) => text.lineHeight};
-	font-weight: ${({ text }) => text.fontWeight};
-	padding: none;
-	margin: 0px;
+const StyledText = styled.p `
+	color: ${({ textColor }) => textColor};
+	font-size: ${({ text }) => text.fontSize};
+	line-height: ${({ text }) => text.lineHeight};
+	font-weight: ${({ text }) => text.fontWeight};
+	padding: none;
+	margin: 0px;
 `;
 export const Typography = (props) => {
     const { textColor, variant, content, children, ...htmlProps } = props;

package/dist/Molecules/Form/Form.js

@@ -1,13 +1,13 @@
 import styled from "@emotion/styled";
 import React from "react";
-export const ContentContainer = styled.div `
-	display: flex;
-	padding: 24px;
-	flex-direction: column;
-	align-items: center;
-	gap: 8px;
-	align-self: stretch;
-	background-color: ${({ colors }) => colors.background.primary};
+export const ContentContainer = styled.div `
+	display: flex;
+	padding: 24px;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+	align-self: stretch;
+	background-color: ${({ colors }) => colors.background.primary};
 `;
 function Form(props) {
     const { children, colors } = props;

package/dist/Molecules/NavMenu/NavMenu.js

@@ -3,121 +3,121 @@ import { keyframes } from "@emotion/react";
 import React, { useState, useMemo, useRef } from "react";
 import { FiMenu, FiCloud, FiCloudOff, FiSun, FiMoon, FiChevronRight, FiX, } from "react-icons/fi";
 import Toggle from "../../Atoms/Toggle/Toggle";
-const slideInLeft = keyframes `
- 0% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
+const slideInLeft = keyframes `
+ 0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
 `;
-const NavMenu = styled.div `
-	display: flex;
-	flex-direction: column;
-	background: ${({ colorPalette }) => colorPalette.background.primary};
-	width: 100vw;
+const NavMenu = styled.div `
+	display: flex;
+	flex-direction: column;
+	background: ${({ colorPalette }) => colorPalette.background.primary};
+	width: 100vw;
 `;
-const NavBarHeader = styled.div `
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	height: 88px;
-	border-width: 0 0 1px 0;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.background.secondary};
+const NavBarHeader = styled.div `
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 88px;
+	border-width: 0 0 1px 0;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.background.secondary};
 `;
-const OnlineStatus = styled.div `
-	display: flex;
-	padding: 8px 12px;
-	justify-content: center;
-	align-items: center;
-	gap: 8px;
-	border-radius: 32px;
-	font-weight: 700;
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.buttonBackground.success};
-	color: ${({ colorPalette }) => colorPalette.buttonBackground.success};
-	background: #ebfaed;
+const OnlineStatus = styled.div `
+	display: flex;
+	padding: 8px 12px;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+	border-radius: 32px;
+	font-weight: 700;
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.buttonBackground.success};
+	color: ${({ colorPalette }) => colorPalette.buttonBackground.success};
+	background: #ebfaed;
 `;
-const OfflineStatus = styled.div `
-	display: flex;
-	padding: 8px 12px;
-	justify-content: center;
-	align-items: center;
-	gap: 8px;
-	border-radius: 32px;
-	font-weight: 700;
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.utils.icon};
-	color: ${({ colorPalette }) => colorPalette.utils.icon};
+const OfflineStatus = styled.div `
+	display: flex;
+	padding: 8px 12px;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+	border-radius: 32px;
+	font-weight: 700;
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.utils.icon};
+	color: ${({ colorPalette }) => colorPalette.utils.icon};
 `;
-const NavMenuDropdown = styled.div `
-	width: 320px;
-	position: absolute;
-	top: 88px;
-	z-index: 1000;
-	box-shadow: 5px 5px 5px rgba(64, 64, 64, 0.2);
-	background: ${({ colorPalette }) => colorPalette.background.primary};
-	animation: ${slideInLeft} 0.5s ease-out forwards;
-	display: ${({ navOpen }) => (navOpen ? "flex" : "none")};
-	flex-direction: column;
-	&:focus {
-		outline: none;
-	}
+const NavMenuDropdown = styled.div `
+	width: 320px;
+	position: absolute;
+	top: 88px;
+	z-index: 1000;
+	box-shadow: 5px 5px 5px rgba(64, 64, 64, 0.2);
+	background: ${({ colorPalette }) => colorPalette.background.primary};
+	animation: ${slideInLeft} 0.5s ease-out forwards;
+	display: ${({ navOpen }) => (navOpen ? "flex" : "none")};
+	flex-direction: column;
+	&:focus {
+		outline: none;
+	}
 `;
-const MenuItems = styled.div `
-	align-items: flex-start;
-	align-self: stretch;
+const MenuItems = styled.div `
+	align-items: flex-start;
+	align-self: stretch;
 `;
-const MenuItem = styled.div `
-	display: flex;
-	padding: 8px 16px;
-	align-items: center;
-	color: ${({ colorPalette }) => colorPalette.text.tertiary};
-	font-weight: 700;
-	border-width: 0 0 1px 0;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.background.secondary};
-	width: 288px;
-	cursor: pointer;
+const MenuItem = styled.div `
+	display: flex;
+	padding: 8px 16px;
+	align-items: center;
+	color: ${({ colorPalette }) => colorPalette.text.tertiary};
+	font-weight: 700;
+	border-width: 0 0 1px 0;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.background.secondary};
+	width: 288px;
+	cursor: pointer;
 `;
-const Location = styled.div `
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	flex: 1 0 0;
-	font-size: 16px;
-	line-height: 150%;
+const Location = styled.div `
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	flex: 1 0 0;
+	font-size: 16px;
+	line-height: 150%;
 `;
-const Toggles = styled.div `
-	padding: 24px 0px;
+const Toggles = styled.div `
+	padding: 24px 0px;
 `;
-const AppInfo = styled.div `
-	padding: 16px;
-	width: 288px;
-	background: ${({ colorPalette }) => colorPalette.background.tertiary};
+const AppInfo = styled.div `
+	padding: 16px;
+	width: 288px;
+	background: ${({ colorPalette }) => colorPalette.background.tertiary};
 `;
-const LogoAndCopyRights = styled.div `
-	display: flex;
-	gap: 16px;
-	margin-bottom: 12px;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
+const LogoAndCopyRights = styled.div `
+	display: flex;
+	gap: 16px;
+	margin-bottom: 12px;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
 `;
-const CopyRights = styled.div `
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 55%;
+const CopyRights = styled.div `
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 55%;
 `;
-const Version = styled.div `
-	text-align: center;
-	font-size: 14px;
-	font-weight: 400;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
+const Version = styled.div `
+	text-align: center;
+	font-size: 14px;
+	font-weight: 400;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
 `;
 const NavBar = (props) => {
     const { colorPalette, locations, appInfo } = props;

package/dist/Molecules/TableHeader/TableHeader.js

@@ -1,20 +1,20 @@
 import React from "react";
 import styled from "@emotion/styled";
 import { SortDropdown } from "../../Atoms/SortDropdown/SortDropdown";
-const HeaderCell = styled.th `
-  display: flex;
-  height: 56px;
-  padding: 0px 8px;
-  align-items: center;
-  gap: 16px;
-  align-self: stretch;
-  color: ${({ colorPalette }) => colorPalette.text.primary};
-  align-items: center;
-  min-height: 40px;
-  font-size: 16px;
-  justify-content: space-between;
-  width: 100%;
-  display: flex;
+const HeaderCell = styled.th `
+  display: flex;
+  height: 56px;
+  padding: 0px 8px;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+  color: ${({ colorPalette }) => colorPalette.text.primary};
+  align-items: center;
+  min-height: 40px;
+  font-size: 16px;
+  justify-content: space-between;
+  width: 100%;
+  display: flex;
 `;
 export const TableHeader = (props) => {
     const { columns, colorPalette } = props;

package/dist/Molecules/TableRow/TableRow.js

@@ -1,33 +1,33 @@
 import React from "react";
 import styled from "@emotion/styled";
-const StyledTableRow = styled.tr `
-	display: flex;
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.border.secondary};
-	background: $ ${({ colorPalette }) => colorPalette.background.primary};
-	border-right: none;
-	border-left: none;
-	border-top: none;
+const StyledTableRow = styled.tr `
+	display: flex;
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.border.secondary};
+	background: $ ${({ colorPalette }) => colorPalette.background.primary};
+	border-right: none;
+	border-left: none;
+	border-top: none;
 `;
-export const TableCell = styled.td `
-	width: 100%;
-	min-height: 50px;
-	display: flex;
-	padding: 0px 8px;
-	justify-content: flex-start;
-	align-items: center;
-	align-self: stretch;
-	justify-content: start;
-	flex: 1;
-	font-size: 16px;
-	font-weight: 400;
-	word-break: break-word;
-    white-space: normal;
-    flex-wrap: wrap;
-	:hover: {
-		background: ${({ colorPalette }) => colorPalette.background.secondary};	
-	}
+export const TableCell = styled.td `
+	width: 100%;
+	min-height: 50px;
+	display: flex;
+	padding: 0px 8px;
+	justify-content: flex-start;
+	align-items: center;
+	align-self: stretch;
+	justify-content: start;
+	flex: 1;
+	font-size: 16px;
+	font-weight: 400;
+	word-break: break-word;
+    white-space: normal;
+    flex-wrap: wrap;
+	:hover: {
+		background: ${({ colorPalette }) => colorPalette.background.secondary};	
+	}
 `;
 export const TableRow = ({ index, colorPalette, rowData, columnConfig, }) => {
     const rows = Object.entries(rowData)

package/dist/Molecules/Thumbnail/Thumbnail.d.ts

@@ -1,13 +1,13 @@
 import React, { ReactNode, Dispatch, SetStateAction } from "react";
 import { Colors } from "Theme/types";
-export declare const Thumbnail: ({ colorPalette, handleSubmit, settingsChildren, showImage, setShowImage, fieldInstance, s3Key, signedUrl, uploadButtonText, handleRemove, changed, handleChange, }: {
+export declare const Thumbnail: ({ colorPalette, handleSubmit, settingsChildren, showImage, setShowImage, fieldInstance, s3Key, signedUrl, loading, handleRemove, handleChange, }: {
     colorPalette: Colors;
-    handleSubmit: (newValueData: {
+    handleSubmit: (newValueData?: {
         target: {
             name: string;
             value: string;
         };
-    }, useNewValue: boolean) => Promise<void>;
+    }, useNewValue?: boolean) => Promise<void>;
     handleChange(e: React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>): void;
     settingsChildren: ReactNode;
     showImage: boolean;
@@ -15,7 +15,7 @@ export declare const Thumbnail: ({ colorPalette, handleSubmit, settingsChildren,
     fieldInstance: any;
     s3Key: string;
     signedUrl: any;
-    uploadButtonText: string;
+    loading: boolean;
     handleRemove?: () => void;
     changed: boolean;
 }) => React.JSX.Element;

package/dist/Molecules/Thumbnail/Thumbnail.js

@@ -2,59 +2,63 @@ 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 { 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 +72,134 @@ 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);
+            handleSubmit();
         }
     };
+    /**
+     * 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);
+            handleSubmit();
         }
     };
+    /**
+     * 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);
+            handleSubmit();
+        }
     };
-    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();
+            handleSubmit();
+        }
+    };
+    /**
+     * 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 }))))),
-        showImage && !showSettings && (React.createElement(InputArea, { onDrop: handleDrop, onDragOver: handleDragOver, colors: colorPalette },
+                React.createElement(Button, { colorPalette: colorPalette, icon: React.createElement(FiTrash2, null), variant: "destructive", onClick: clearInput })))),
+        showImage && !showSettings && (loading ? (React.createElement(Spinner, { colorPalette: colorPalette })) : (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("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))));
 };
 //# sourceMappingURL=Thumbnail.js.map