@dtdot/lego 0.17.2 → 0.17.8

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

@@ -72,7 +72,7 @@ const ImageUpload = ({ name, value, onChange, onSearch }) => {
                 onChange(url);
             }
             if (contextOnChange) {
-                contextOnChange({ target: { value: url } });
+                contextOnChange(url);
             }
         }
     };

package/build/components/LiveList/LiveList.component.js

@@ -35,7 +35,7 @@ const addVariants = {
 const defaultValue = [{ id: uuidv4(), value: '' }];
 const LiveList = ({ value: inputValue, name, onChange: propsOnChange }) => {
     const { getFocused, requestFocus } = useContext(FocusContext);
-    const { value: contextValue, error: contextError, onChange: contextOnChange } = useFormNode(name);
+    const { value: contextValue, error: contextError, onChange: contextOnChange, } = useFormNode(name);
     const value = contextValue || inputValue || defaultValue;
     const wrappedOnChange = useCallback((val) => {
         if (propsOnChange) {
@@ -46,7 +46,7 @@ const LiveList = ({ value: inputValue, name, onChange: propsOnChange }) => {
         }
     }, [propsOnChange, contextOnChange]);
     useEffect(() => {
-        if (!(value === null || value === void 0 ? void 0 : value.length)) {
+        if (!value?.length) {
             wrappedOnChange([{ id: uuidv4(), value: '' }]);
         }
     }, [value, wrappedOnChange]);
@@ -65,10 +65,13 @@ const LiveList = ({ value: inputValue, name, onChange: propsOnChange }) => {
             return;
         }
         const focusedValue = value.find((val) => val.id === focusedId);
-        if (focusedValue === null || focusedValue === void 0 ? void 0 : focusedValue.value) {
+        if (focusedValue?.value) {
             return;
         }
         const focusedIndex = value.findIndex((val) => val.id === focusedId);
+        if (focusedIndex === 0) {
+            return;
+        }
         const prevId = focusedIndex > 0 ? value[focusedIndex - 1].id : undefined;
         wrappedOnChange(value.filter((val) => val.id !== focusedId));
         if (prevId) {
@@ -94,7 +97,7 @@ const LiveList = ({ value: inputValue, name, onChange: propsOnChange }) => {
         const newItem = { id: uuidv4(), value: '' };
         wrappedOnChange([...value, newItem]);
     };
-    if (!(value === null || value === void 0 ? void 0 : value.length)) {
+    if (!value?.length) {
         return null;
     }
     return (React.createElement("div", null,

package/build/components/LiveList/LiveList.stories.d.ts

@@ -3,5 +3,6 @@ import { Meta } from '@storybook/react/types-6-0';
 export declare const Standard: () => JSX.Element;
 export declare const InForm: () => JSX.Element;
 export declare const WithValidation: () => JSX.Element;
+export declare const EmptyList: () => JSX.Element;
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;

package/build/components/LiveList/LiveList.stories.js

@@ -44,6 +44,13 @@ export const WithValidation = () => {
             React.createElement(Button, { onClick: clear }, "Clear"),
             React.createElement(Button, { onClick: validate }, "Set Errors"))));
 };
+export const EmptyList = () => {
+    const [value, setValue] = useState({});
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Heading.FormHeading, null, "Ingredients"),
+        React.createElement(Spacer, { size: '1x' }),
+        React.createElement(LiveList, { value: value, onChange: setValue })));
+};
 export default {
     title: 'Components/LiveList',
     component: LiveList,

package/build/components/LiveList/_FocusContext.js

@@ -57,7 +57,7 @@ const FocusContextProvider = ({ children }) => {
 function FocusContextProviderHOC(WrappedComponent) {
     const HocComponent = (props) => {
         return (React.createElement(FocusContextProvider, null,
-            React.createElement(WrappedComponent, Object.assign({}, props))));
+            React.createElement(WrappedComponent, { ...props })));
     };
     return HocComponent;
 }

package/build/components/LiveList/_LiveListRow.js

@@ -60,7 +60,7 @@ const LiveListRow = ({ id, value, error, onChange, onRemove }) => {
         onBlur(id);
     };
     return (React.createElement(InputContainer, { whileHover: 'hover' },
-        React.createElement(Input, { onFocus: handleFocus, onBlur: handleBlur, ref: inputRef, value: value, error: error, onChange: handleChange }),
+        React.createElement(Input, { onFocus: handleFocus, onBlur: handleBlur, ref: inputRef, value: value || '', error: error, onChange: handleChange }),
         React.createElement(RemoveContainer, { animate: isFocused ? 'focus' : undefined, style: { opacity: 0 }, variants: removeVariants, transition: { type: 'spring', duration: 0.3 } },
             React.createElement(RemoveInner, { onClick: onRemove },
                 React.createElement(FontAwesomeIcon, { icon: faTimes })))));

package/build/components/Notification/Notification.component.js

@@ -11,5 +11,5 @@ const NotificationContainer = styled.div `
   }
 `;
 const Notification = (props) => (React.createElement(NotificationContainer, null,
-    React.createElement(Alert, Object.assign({}, props))));
+    React.createElement(Alert, { ...props })));
 export default Notification;

package/build/components/ProfileImage/ProfileImage.component.js

@@ -30,7 +30,7 @@ const Identicon = ({ value }) => {
     const hexColours = [colours.red, colours.green, colours.blue, colours.yellow];
     const convertedColours = hexColours.map((hex) => {
         const rgb = hexToRgb(hex);
-        return [rgb === null || rgb === void 0 ? void 0 : rgb.r, rgb === null || rgb === void 0 ? void 0 : rgb.g, rgb === null || rgb === void 0 ? void 0 : rgb.b, 255];
+        return [rgb?.r, rgb?.g, rgb?.b, 255];
     });
     const hash = SparkMD5.hash(value || 'unknown user');
     const colourIndex = Math.floor(Math.random() * 4);

package/build/components/QrCode/QrCode.component.js

@@ -45,7 +45,7 @@ const QrCode = ({ value }) => {
         if (hintTimeoutRef.current) {
             window.clearTimeout(hintTimeoutRef.current);
         }
-        if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+        if (inputRef?.current) {
             inputRef.current.select();
             document.execCommand('copy');
         }

package/build/hooks/useKeyPress.js

@@ -4,14 +4,13 @@ const useKeypress = (key, handler) => {
     useEffect(() => {
         eventListenerRef.current = (event) => {
             if (key === event.key) {
-                handler === null || handler === void 0 ? void 0 : handler();
+                handler?.();
             }
         };
     }, [key, handler]);
     useEffect(() => {
         const eventListener = (event) => {
-            var _a;
-            (_a = eventListenerRef.current) === null || _a === void 0 ? void 0 : _a.call(eventListenerRef, event);
+            eventListenerRef.current?.(event);
         };
         window.addEventListener('keydown', eventListener);
         return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.17.2",
+  "version": "0.17.8",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -17,36 +17,36 @@
     "build"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.12.8",
-    "@babel/core": "^7.12.9",
-    "@babel/preset-react": "^7.12.7",
-    "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addon-actions": "^6.1.10",
-    "@storybook/addon-essentials": "^6.1.10",
-    "@storybook/addon-links": "^6.1.10",
-    "@storybook/react": "^6.1.10",
-    "@types/identicon.js": "^2.3.0",
-    "@types/qrcode": "^1.4.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.9",
+    "@babel/cli": "^7.17.0",
+    "@babel/core": "^7.17.2",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@types/identicon.js": "^2.3.1",
+    "@types/qrcode": "^1.4.2",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
     "@types/spark-md5": "^3.0.2",
-    "@types/styled-components": "^5.1.4",
+    "@types/styled-components": "^5.1.22",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^4.9.1",
-    "@typescript-eslint/parser": "^4.9.1",
-    "babel-loader": "^8.2.2",
-    "eslint": "^7.15.0",
-    "eslint-config-prettier": "^7.0.0",
-    "eslint-plugin-prettier": "^3.2.0",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "prettier": "^2.2.1",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "babel-loader": "^8.2.3",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "prettier": "^2.5.1",
     "prettier-eslint": "^12.0.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "storybook-addon-styled-component-theme": "^1.3.0",
-    "styled-components": "^5.2.1",
-    "typescript": "^4.1.2"
+    "styled-components": "^5.3.3",
+    "typescript": "^4.5.5"
   },
   "peerDependencies": {
     "react": "^17.0.1",
@@ -55,13 +55,13 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.13",
-    "framer-motion": "^4.1.17",
+    "framer-motion": "^6.2.6",
     "identicon.js": "^2.3.3",
-    "qrcode": "^1.4.4",
+    "qrcode": "^1.5.0",
     "react-use-measure": "^2.1.1",
-    "spark-md5": "^3.0.1",
+    "spark-md5": "^3.0.2",
     "uuid": "^8.3.2"
   }
 }