@dtdot/lego 0.19.3 → 0.19.7

package/build/components/ImageUpload/ImageUpload.component.d.ts

@@ -1,11 +1,14 @@
 /// <reference types="react" />
 export declare type ImageUploadMode = 'fill' | 'form';
 interface ImageUploadProps {
-    name: string;
-    value?: string;
-    onChange?: (value: string) => void;
-    onSearch?: () => void;
-    uploadFn?: (file: File) => Promise<string>;
+    'name': string;
+    'value'?: string;
+    'error'?: string;
+    'uploading'?: boolean;
+    'onChange'?: (value: string) => void;
+    'onSearch'?: () => void;
+    'uploadFn'?: (file: File) => Promise<string>;
+    'data-cy'?: string;
 }
-declare const ImageUpload: ({ name, value, onChange, onSearch }: ImageUploadProps) => JSX.Element;
+declare const ImageUpload: ({ name, value, "error": propsError, "uploading": uploadingProp, onChange, onSearch, "data-cy": dataCy, }: ImageUploadProps) => JSX.Element;
 export default ImageUpload;

package/build/components/ImageUpload/ImageUpload.component.js

@@ -1,10 +1,11 @@
-import React, { useContext, useRef } from 'react';
-import { faCloudUploadAlt, faSearch } from '@fortawesome/free-solid-svg-icons';
+import React, { useContext, useRef, useState } from 'react';
+import { faCloudUploadAlt, faExclamationCircle, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import FileContext from '../../contexts/File.context';
 import useFormNode from '../Form/useFormNode.hook';
+import Loader from '../Loader/Loader.component';
 const UploadContainer = styled.div `
   position: relative;
   min-height: 144px;
@@ -24,6 +25,13 @@ const UploadInnerContainer = styled.div `
   display: flex;
   justify-content: space-evenly;
 `;
+const LoaderContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
 const IconContainer = styled(motion.div) `
   flex-grow: 1;
   margin: 8px;
@@ -55,10 +63,42 @@ const Image = styled.img `
   height: 100%;
   object-fit: cover;
 `;
-const ImageUpload = ({ name, value, onChange, onSearch }) => {
+const ErrorMessage = styled.div `
+  padding-left: 6px;
+
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  color: ${(props) => props.theme.colours.statusDanger.main};
+`;
+const ErrorContainer = styled(motion.div) `
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  font-size: ${(props) => props.theme.fonts.default.size};
+  color: ${(props) => props.theme.colours.statusDanger.main};
+`;
+const ErrorInner = styled.div `
+  width: 24px;
+  height: 24px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+const errorVariants = {
+    show: { opacity: 1 },
+};
+const ImageUpload = ({ name, value, 'error': propsError, 'uploading': uploadingProp, onChange, onSearch, 'data-cy': dataCy, }) => {
     const { upload, getUrl } = useContext(FileContext);
-    const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+    const [uploading, setUploading] = useState(false);
+    const { value: contextValue, error: contextError, onChange: contextOnChange } = useFormNode(name);
     const inputRef = useRef();
+    const error = contextError || propsError;
     const handleUploadClicked = () => {
         if (inputRef && inputRef.current) {
             inputRef.current.click();
@@ -67,18 +107,29 @@ const ImageUpload = ({ name, value, onChange, onSearch }) => {
     const handleUpload = async (event) => {
         if (event.target.files && upload) {
             const file = event.target.files[0];
-            const url = await upload(file);
-            if (onChange) {
-                onChange(url);
+            setUploading(true);
+            try {
+                const url = await upload(file);
+                if (onChange) {
+                    onChange(url);
+                }
+                if (contextOnChange) {
+                    contextOnChange(url);
+                }
             }
-            if (contextOnChange) {
-                contextOnChange(url);
+            finally {
+                setUploading(false);
             }
         }
     };
     const internalValue = value ? value : contextValue;
+    if (uploading || uploadingProp) {
+        return (React.createElement(UploadContainer, { "data-cy": dataCy },
+            React.createElement(LoaderContainer, null,
+                React.createElement(Loader, null))));
+    }
     if (!internalValue) {
-        return (React.createElement(UploadContainer, null,
+        return (React.createElement(UploadContainer, { "data-cy": dataCy },
             React.createElement(UploadInnerContainer, null,
                 React.createElement(IconContainer, { whileHover: { scale: 1.05 }, onClick: handleUploadClicked, "data-cy": 'button-image-upload' },
                     React.createElement(FontAwesomeIcon, { icon: faCloudUploadAlt })),
@@ -86,8 +137,13 @@ const ImageUpload = ({ name, value, onChange, onSearch }) => {
                     React.createElement(UploadVerticalDivider, null),
                     React.createElement(IconContainer, { whileHover: { scale: 1.05 }, onClick: onSearch, "data-cy": 'button-image-search' },
                         React.createElement(FontAwesomeIcon, { icon: faSearch }))))),
-            React.createElement(HiddenInput, { value: '', ref: inputRef, type: 'file', onChange: handleUpload, "data-cy": 'input-image-hidden' })));
+            React.createElement(HiddenInput, { value: '', ref: inputRef, type: 'file', onChange: handleUpload, "data-cy": 'input-image-hidden' }),
+            error && (React.createElement(ErrorContainer, { animate: error ? 'show' : undefined, style: { opacity: 0 }, variants: errorVariants, transition: { type: 'spring', duration: 0.3 }, "data-cy": 'error-indicator' },
+                React.createElement(ErrorInner, null,
+                    React.createElement(FontAwesomeIcon, { icon: faExclamationCircle })),
+                React.createElement(ErrorMessage, { "data-cy": 'error-message' }, error)))));
     }
-    return React.createElement(Image, { src: getUrl(internalValue) });
+    return (React.createElement("div", { "data-cy": dataCy },
+        React.createElement(Image, { "data-cy": 'uploaded-image', src: getUrl(internalValue) })));
 };
 export default ImageUpload;

package/build/components/Input/Input.component.js

@@ -7,7 +7,7 @@ import styled, { css } from 'styled-components';
 import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
 import useFormNode, { getValue } from '../Form/useFormNode.hook';
 export const INPUT_HEIGHT = 48;
-const InputContainer = styled(motion.div) `
+const InputContainer = styled.div `
   position: relative;
   margin: 2px 0;
 
@@ -117,13 +117,14 @@ const Input = React.forwardRef(function ForwardRefInput(props, ref) {
             onBlur();
         }
     };
+    const animationVariant = error ? (isFocused ? 'errorFocus' : 'error') : undefined;
     return (React.createElement("div", null,
         label && React.createElement(InputLabel, { htmlFor: name }, label),
-        React.createElement(InputContainer, { animate: error ? (isFocused ? 'errorFocus' : 'error') : undefined },
-            React.createElement(StyledInput, { ref: ref, variants: inputVariants, transition: { type: 'spring', duration: 0.3 }, type: type, name: name, placeholder: placeholder, value: getValue(value, contextValue), onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, autoFocus: autoFocus, "data-cy": dataCy || 'input' }),
-            React.createElement(ErrorContainer, { animate: error ? 'show' : undefined, style: { opacity: 0 }, variants: errorVariants, transition: { type: 'spring', duration: 0.3 } },
+        React.createElement(InputContainer, { "data-cy": dataCy },
+            React.createElement(StyledInput, { ref: ref, animate: animationVariant, variants: inputVariants, transition: { type: 'spring', duration: 0.3 }, type: type, name: name, placeholder: placeholder, value: getValue(value, contextValue), onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, autoFocus: autoFocus, "data-cy": 'input' }),
+            React.createElement(ErrorContainer, { animate: error ? 'show' : undefined, style: { opacity: 0 }, variants: errorVariants, transition: { type: 'spring', duration: 0.3 }, "data-cy": 'error-indicator' },
                 React.createElement(ErrorInner, null,
                     React.createElement(FontAwesomeIcon, { icon: faExclamationCircle }))),
-            error && (React.createElement(ErrorMessage, { style: { opacity: 0, y: 0 }, variants: messageVariants, transition: { type: 'spring', duration: 0.3 } }, error)))));
+            error && (React.createElement(ErrorMessage, { style: { opacity: 0, y: 0 }, animate: animationVariant, variants: messageVariants, transition: { type: 'spring', duration: 0.3 }, "data-cy": 'error-message' }, error)))));
 });
 export default Input;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.19.3",
+  "version": "0.19.7",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -44,7 +44,7 @@
     "prettier-eslint": "^13.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "storybook-addon-styled-component-theme": "^1.3.0",
+    "storybook-addon-styled-component-theme": "^2.0.0",
     "styled-components": "^5.3.5",
     "typescript": "^4.5.5"
   },