@dtdot/lego 0.16.3 → 0.17.2

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

@@ -1,9 +1,10 @@
 import React from 'react';
 interface FormProps {
-    value: any;
+    value: Record<string, any>;
+    errors?: Record<string, any>;
     onChange: (value: any) => void;
     onSubmit?: () => void;
     children: React.ReactNode;
 }
-declare const Form: ({ value, onChange, onSubmit, children }: FormProps) => JSX.Element;
+declare const Form: ({ value, errors, onChange, onSubmit, children }: FormProps) => JSX.Element;
 export default Form;

package/build/components/Form/Form.component.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 import React from 'react';
 import FormStateContext from './FormState.context';
-const Form = ({ value, onChange, onSubmit, children }) => {
+const Form = ({ value, errors = {}, onChange, onSubmit, children }) => {
     const onChangeFn = (key, fieldValue) => {
         onChange({
             ...value,
@@ -16,6 +16,7 @@ const Form = ({ value, onChange, onSubmit, children }) => {
     };
     const contextValue = {
         value,
+        errors,
         onChange: onChangeFn,
     };
     return (React.createElement(FormStateContext.Provider, { value: contextValue },

package/build/components/Form/FormState.context.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 interface FormStateContextProps {
     value: Record<string, any>;
+    errors: Record<string, any>;
     onChange?: (key: string, value: any) => void;
 }
 declare const FormStateContext: import("react").Context<FormStateContextProps>;

package/build/components/Form/FormState.context.js

@@ -1,6 +1,7 @@
 import { createContext } from 'react';
 const FormStateContext = createContext({
     value: {},
+    errors: {},
     onChange: undefined,
 });
 export default FormStateContext;

package/build/components/Form/useFormNode.hook.d.ts

@@ -1,5 +1,10 @@
-declare function useFormNode(key: string): {
-    value: any;
-    onChange: (_value: any) => void;
+declare function useFormNode<T = string, K = string>(key?: string): {
+    value: undefined;
+    error: undefined;
+    onChange: undefined;
+} | {
+    value: T | undefined;
+    error: K | undefined;
+    onChange: (_value: T) => void;
 };
 export default useFormNode;

package/build/components/Form/useFormNode.hook.js

@@ -1,15 +1,24 @@
 import { useContext } from 'react';
 import FormStateContext from './FormState.context';
 function useFormNode(key) {
-    const { value, onChange } = useContext(FormStateContext);
+    const { value, errors, onChange } = useContext(FormStateContext);
+    if (!key) {
+        return {
+            value: undefined,
+            error: undefined,
+            onChange: undefined,
+        };
+    }
     const internalOnChange = (_value) => {
         if (onChange) {
             onChange(key, _value);
         }
     };
     const internalValue = value[key];
+    const internalError = errors[key];
     return {
         value: internalValue,
+        error: internalError,
         onChange: internalOnChange,
     };
 }

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

@@ -1,11 +1,16 @@
-/// <reference types="react" />
+import React from 'react';
+export declare const INPUT_HEIGHT = 48;
+export declare const InputStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export interface IInputProps {
-    name: string;
+    name?: string;
     label?: string;
     placeholder?: string;
     type?: string;
     value?: string;
+    error?: string;
     onChange?: (value: any) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
-declare const Input: ({ label, name, placeholder, type, value, onChange }: IInputProps) => JSX.Element;
+declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

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

@@ -1,8 +1,18 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
-import React from 'react';
-import styled from 'styled-components';
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { motion } from 'framer-motion';
+import React, { useState } from 'react';
+import styled, { css } from 'styled-components';
 import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
 import useFormNode from '../Form/useFormNode.hook';
+export const INPUT_HEIGHT = 48;
+const InputContainer = styled(motion.div) `
+  position: relative;
+  margin: 2px 0;
+
+  background-color: ${(props) => props.theme.colours.controlBackground};
+`;
 const InputLabel = styled.label `
   display: block;
   padding-bottom: 8px;
@@ -11,13 +21,14 @@ const InputLabel = styled.label `
   font-family: ${(props) => props.theme.fonts.default.family};
   font-size: ${(props) => props.theme.fonts.default.size};
 `;
-const StyledInput = styled.input `
+export const InputStyles = css `
   outline: none;
   box-shadow: none;
 
   width: 100%;
-  height: 48px;
+  height: ${INPUT_HEIGHT}px;
   padding: 0 12px;
+  scroll-margin-bottom: 100px;
 
   font-family: ${(props) => props.theme.fonts.default.family};
   font-size: ${(props) => props.theme.fonts.default.size};
@@ -40,8 +51,52 @@ const StyledInput = styled.input `
     color: ${(props) => getThemeControlColours(props.theme).placeholder};
   }
 `;
-const Input = ({ label, name, placeholder, type = 'text', value, onChange }) => {
-    const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+const StyledInput = styled(motion.input) `
+  ${InputStyles}
+`;
+const ErrorMessage = styled(motion.div) `
+  position: absolute;
+  left: 38px;
+  bottom: 0;
+
+  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: 0;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  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, x: 10 },
+};
+const inputVariants = {
+    error: { paddingLeft: '38px' },
+    errorFocus: { paddingLeft: '38px', paddingBottom: '18px' },
+};
+const messageVariants = {
+    errorFocus: { opacity: 1, y: -4 },
+};
+const Input = React.forwardRef(function ForwardRefInput(props, ref) {
+    const { label, name, placeholder, type = 'text', value, error: propsError, onChange, onFocus, onBlur } = props;
+    const [isFocused, setIsFocused] = useState(false);
+    const { value: contextValue, error: contextError, onChange: contextOnChange } = useFormNode(name);
+    const error = contextError || propsError;
     const handleChange = (e) => {
         if (onChange) {
             onChange(e.target.value);
@@ -50,8 +105,25 @@ const Input = ({ label, name, placeholder, type = 'text', value, onChange }) =>
             contextOnChange(e.target.value);
         }
     };
+    const handleFocus = () => {
+        setIsFocused(true);
+        if (onFocus) {
+            onFocus();
+        }
+    };
+    const handleBlur = () => {
+        setIsFocused(false);
+        if (onBlur) {
+            onBlur();
+        }
+    };
     return (React.createElement("div", null,
         label && React.createElement(InputLabel, { htmlFor: name }, label),
-        React.createElement(StyledInput, { type: type, name: name, placeholder: placeholder, value: value || contextValue, onChange: handleChange })));
-};
+        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: value || contextValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }),
+            React.createElement(ErrorContainer, { animate: error ? 'show' : undefined, style: { opacity: 0 }, variants: errorVariants, transition: { type: 'spring', duration: 0.3 } },
+                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)))));
+});
 export default Input;

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

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

package/build/components/Input/Input.stories.js

@@ -1,11 +1,27 @@
-import React from 'react';
-import { Input, ControlGroup } from '../..';
+import React, { useState } from 'react';
+import { Button, ButtonGroup, Input, ControlGroup, Spacer } from '../..';
 export const Standard = () => (React.createElement(ControlGroup, null,
     React.createElement(Input, { name: 'one', label: 'A standard input' }),
     React.createElement(Input, { name: 'two', label: 'Another input' })));
 export const WithoutLabels = () => (React.createElement(ControlGroup, null,
     React.createElement(Input, { name: 'one', placeholder: 'A standard input' }),
     React.createElement(Input, { name: 'two', placeholder: 'Another input' })));
+export const WithError = () => {
+    const [error, setError] = useState('Input has an error!');
+    const clear = () => {
+        setError(undefined);
+    };
+    const validate = () => {
+        setError('Input has an error!');
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ControlGroup, null,
+            React.createElement(Input, { name: 'one', error: error, placeholder: 'A standard input' })),
+        React.createElement(Spacer, { size: '2x' }),
+        React.createElement(ButtonGroup, null,
+            React.createElement(Button, { onClick: clear }, "Clear"),
+            React.createElement(Button, { onClick: validate }, "Set Errors"))));
+};
 export default {
     title: 'Components/Input',
     component: Input,

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

@@ -1,10 +1,10 @@
-import React from 'react';
+/// <reference types="react" />
 interface LiveInputProps {
     name: string;
     placeholder: string;
     type?: string;
     value?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (value: string) => void;
 }
 declare const LiveInput: ({ name, type, placeholder, value, onChange }: LiveInputProps) => JSX.Element;
 export default LiveInput;

package/build/components/LiveInput/LiveInput.component.js

@@ -16,7 +16,15 @@ const StyledInput = styled.input `
 `;
 const LiveInput = ({ name, type = 'text', placeholder, value, onChange }) => {
     const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e.target.value);
+        }
+        if (contextOnChange) {
+            contextOnChange(e.target.value);
+        }
+    };
     return (React.createElement("div", null,
-        React.createElement(StyledInput, { name: name, type: type, value: value || contextValue, placeholder: placeholder, onChange: onChange || contextOnChange })));
+        React.createElement(StyledInput, { name: name, type: type, value: value || contextValue, placeholder: placeholder, onChange: handleChange })));
 };
 export default LiveInput;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface LiveListValue {
+    id: string;
+    value: string;
+}
+export interface LiveListProps {
+    name: string;
+    value?: LiveListValue[];
+    onChange?: (value: LiveListValue[]) => void;
+}
+declare const _default: (props: any) => JSX.Element;
+export default _default;

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

@@ -0,0 +1,108 @@
+import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { motion } from 'framer-motion';
+import React, { useCallback, useContext, useEffect } from 'react';
+import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+import useKeypress from '../../hooks/useKeyPress';
+import useFormNode from '../Form/useFormNode.hook';
+import { FocusContext, FocusContextProviderHOC } from './_FocusContext';
+import LiveListRow from './_LiveListRow';
+const AddRow = styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  margin-top: 4px;
+`;
+const AddRowInner = styled(motion.div) `
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  overflow: hidden;
+
+  color: ${(props) => props.theme.colours.defaultFont};
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+`;
+const IconContainer = styled.div `
+  padding-right: 4px;
+`;
+const addVariants = {
+    hover: { scale: 1.05 },
+};
+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 || inputValue || defaultValue;
+    const wrappedOnChange = useCallback((val) => {
+        if (propsOnChange) {
+            propsOnChange(val);
+        }
+        if (contextOnChange) {
+            contextOnChange(val);
+        }
+    }, [propsOnChange, contextOnChange]);
+    useEffect(() => {
+        if (!(value === null || value === void 0 ? void 0 : value.length)) {
+            wrappedOnChange([{ id: uuidv4(), value: '' }]);
+        }
+    }, [value, wrappedOnChange]);
+    useKeypress('Enter', () => {
+        const focusedId = getFocused();
+        const focusedIndex = value.findIndex((val) => val.id === focusedId);
+        const newItem = { id: uuidv4(), value: '' };
+        const newValue = [...value];
+        newValue.splice(focusedIndex + 1, 0, newItem);
+        wrappedOnChange(newValue);
+        requestFocus(newItem.id);
+    });
+    useKeypress('Backspace', () => {
+        const focusedId = getFocused();
+        if (!focusedId) {
+            return;
+        }
+        const focusedValue = value.find((val) => val.id === focusedId);
+        if (focusedValue === null || focusedValue === void 0 ? void 0 : focusedValue.value) {
+            return;
+        }
+        const focusedIndex = value.findIndex((val) => val.id === focusedId);
+        const prevId = focusedIndex > 0 ? value[focusedIndex - 1].id : undefined;
+        wrappedOnChange(value.filter((val) => val.id !== focusedId));
+        if (prevId) {
+            // Timeout to prevent deleting the last char of the previous row
+            setTimeout(() => {
+                requestFocus(prevId);
+            });
+        }
+    });
+    const handleRowChange = (updateId, updateValue) => {
+        wrappedOnChange(value.map((v) => (v.id === updateId ? { ...v, value: updateValue } : v)));
+    };
+    const handleRowRemove = (id) => {
+        if (value.length === 1) {
+            const withValueCleared = [...value];
+            value[0].value = '';
+            wrappedOnChange(withValueCleared);
+            return;
+        }
+        wrappedOnChange(value.filter((val) => val.id !== id));
+    };
+    const handleRowAdd = () => {
+        const newItem = { id: uuidv4(), value: '' };
+        wrappedOnChange([...value, newItem]);
+    };
+    if (!(value === null || value === void 0 ? void 0 : value.length)) {
+        return null;
+    }
+    return (React.createElement("div", null,
+        value.map((val) => (React.createElement(LiveListRow, { key: val.id, id: val.id, value: val.value, error: contextError ? contextError[val.id] : undefined, onChange: (newVal) => handleRowChange(val.id, newVal), onRemove: () => handleRowRemove(val.id) }))),
+        React.createElement(AddRow, null,
+            React.createElement(AddRowInner, { style: { scale: 1 }, whileHover: 'hover', variants: addVariants, onClick: handleRowAdd },
+                React.createElement(IconContainer, null,
+                    React.createElement(FontAwesomeIcon, { icon: faPlusCircle })),
+                "add"))));
+};
+export default FocusContextProviderHOC(LiveList);

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+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;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

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

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Button, ButtonGroup, ControlGroup, Form, Heading, ImageUpload, Input, LiveList, Spacer, Text } from '../..';
+const exampleLiveListValue = [
+    { id: '6f974464-d592-4271-b3ae-2821fffce258', value: '500g chicken' },
+    { id: 'a273d33a-2643-4991-b81d-2beff51d42a8', value: '1/2 cup rice' },
+    { id: '2ecef56f-f725-4f8a-ac84-bd3117e7d50b', value: '1 tbs olive oil' },
+];
+const exampleListErrors = {
+    '6f974464-d592-4271-b3ae-2821fffce258': 'Ingredient not found',
+    'a273d33a-2643-4991-b81d-2beff51d42a8': 'Ingredient not found',
+};
+export const Standard = () => {
+    const [value, setValue] = useState(exampleLiveListValue);
+    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 const InForm = () => {
+    const [value, setValue] = useState({});
+    return (React.createElement(Form, { value: value, onChange: setValue },
+        React.createElement(ControlGroup, { variation: 'comfortable' },
+            React.createElement(ImageUpload, { name: 'image' }),
+            React.createElement(Input, { name: 'name', placeholder: 'Something tasty..' }),
+            React.createElement(Heading.FormHeading, null, "Ingredients"),
+            React.createElement(LiveList, { name: 'ingredients' }))));
+};
+export const WithValidation = () => {
+    const value = { ingredients: exampleLiveListValue };
+    const [errors, setErrors] = useState({ ingredients: exampleListErrors });
+    const validate = () => {
+        setErrors({ ingredients: exampleListErrors });
+    };
+    const clear = () => {
+        setErrors({ ingredients: undefined });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Form, { value: value, errors: errors, onChange: () => undefined },
+            React.createElement(ControlGroup, { variation: 'comfortable' },
+                React.createElement(Text, { variant: 'secondary' }, "Max length 20 chars"),
+                React.createElement(LiveList, { name: 'ingredients' }))),
+        React.createElement(Spacer, { size: '2x' }),
+        React.createElement(ButtonGroup, null,
+            React.createElement(Button, { onClick: clear }, "Clear"),
+            React.createElement(Button, { onClick: validate }, "Set Errors"))));
+};
+export default {
+    title: 'Components/LiveList',
+    component: LiveList,
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface FocusContextProps {
+    getFocused: () => string | undefined;
+    requestFocus: (id: string) => void;
+    onFocus: (id: string) => void;
+    onBlur: (id: string) => void;
+    registerFocusable: (id: string, focus: () => void) => void;
+    deregisterFocusable: (id: string) => void;
+}
+declare const FocusContext: React.Context<FocusContextProps>;
+export interface FocusContextProviderProps {
+    children: React.ReactNode;
+}
+declare const FocusContextProvider: ({ children }: FocusContextProviderProps) => JSX.Element;
+declare function FocusContextProviderHOC(WrappedComponent: any): (props: any) => JSX.Element;
+export { FocusContext, FocusContextProvider, FocusContextProviderHOC };

package/build/components/LiveList/_FocusContext.js

@@ -0,0 +1,64 @@
+import React, { createContext, useCallback, useRef } from 'react';
+const FocusContext = createContext({
+    // eslint-disable-next-line
+    getFocused: () => undefined,
+    // eslint-disable-next-line
+    requestFocus: (id) => { },
+    // eslint-disable-next-line
+    onFocus: (id) => { },
+    // eslint-disable-next-line
+    onBlur: (id) => { },
+    // eslint-disable-next-line
+    registerFocusable: (id, focus) => { },
+    // eslint-disable-next-line
+    deregisterFocusable: (id) => { },
+});
+const FocusContextProvider = ({ children }) => {
+    const focusRef = useRef();
+    const focusRequest = useRef();
+    const subscribersRef = useRef({});
+    const getFocused = () => {
+        return focusRef.current || undefined;
+    };
+    const requestFocus = useCallback((id) => {
+        const subscribers = subscribersRef.current;
+        const matchingSubscriber = subscribers[id];
+        focusRequest.current = id;
+        if (matchingSubscriber) {
+            matchingSubscriber();
+        }
+    }, []);
+    const onFocus = (id) => {
+        focusRef.current = id;
+    };
+    const onBlur = useCallback((id) => {
+        if (focusRef.current === id) {
+            focusRef.current = undefined;
+        }
+    }, []);
+    const registerFocusable = useCallback((id, focus) => {
+        subscribersRef.current[id] = focus;
+        if (focusRequest.current === id) {
+            focus();
+        }
+    }, []);
+    const deregisterFocusable = useCallback((id) => {
+        delete subscribersRef.current[id];
+    }, []);
+    return (React.createElement(FocusContext.Provider, { value: {
+            getFocused,
+            requestFocus,
+            onFocus,
+            onBlur,
+            registerFocusable,
+            deregisterFocusable,
+        } }, children));
+};
+function FocusContextProviderHOC(WrappedComponent) {
+    const HocComponent = (props) => {
+        return (React.createElement(FocusContextProvider, null,
+            React.createElement(WrappedComponent, Object.assign({}, props))));
+    };
+    return HocComponent;
+}
+export { FocusContext, FocusContextProvider, FocusContextProviderHOC };

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface LiveListRowProps {
+    id: string;
+    value: string;
+    error?: string;
+    onChange: (value: string) => void;
+    onRemove: () => void;
+}
+declare const LiveListRow: ({ id, value, error, onChange, onRemove }: LiveListRowProps) => JSX.Element;
+export default LiveListRow;

package/build/components/LiveList/_LiveListRow.js

@@ -0,0 +1,68 @@
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { motion } from 'framer-motion';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { FocusContext } from './_FocusContext';
+import Input from '../Input/Input.component';
+const InputContainer = styled(motion.div) `
+  position: relative;
+  margin: 2px 0;
+
+  background-color: ${(props) => props.theme.colours.controlBackground};
+`;
+const RemoveContainer = styled(motion.div) `
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  color: ${(props) => props.theme.colours.defaultFont};
+`;
+const RemoveInner = styled.div `
+  width: 24px;
+  height: 24px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+const removeVariants = {
+    hover: { opacity: 1, x: -10 },
+    focus: { opacity: 1, x: -10 },
+};
+const LiveListRow = ({ id, value, error, onChange, onRemove }) => {
+    const { onFocus, onBlur, registerFocusable, deregisterFocusable } = useContext(FocusContext);
+    const inputRef = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
+    useEffect(() => {
+        registerFocusable(id, () => {
+            if (inputRef.current) {
+                inputRef.current.focus();
+            }
+            return () => {
+                deregisterFocusable(id);
+            };
+        });
+    }, [id, registerFocusable, deregisterFocusable]);
+    const handleChange = (e) => {
+        onChange(e);
+    };
+    const handleFocus = () => {
+        setIsFocused(true);
+        onFocus(id);
+    };
+    const handleBlur = () => {
+        setIsFocused(false);
+        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(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 })))));
+};
+export default LiveListRow;

package/build/components/Modal/Modal.component.js

@@ -51,7 +51,7 @@ const ModalWrapper = styled.div `
   `)}
 `;
 const ModalOuter = styled(motion.div) `
-  background-color: ${(props) => props.theme.colours.cardBackground};
+  background-color: ${(props) => props.theme.colours.background};
   border-radius: 4px;
   margin: 16px 0 128px 0;
 

package/build/hooks/useKeyPress.d.ts

@@ -0,0 +1,2 @@
+declare const useKeypress: (key: string, handler: () => void) => void;
+export default useKeypress;

package/build/hooks/useKeyPress.js

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+const useKeypress = (key, handler) => {
+    const eventListenerRef = useRef();
+    useEffect(() => {
+        eventListenerRef.current = (event) => {
+            if (key === event.key) {
+                handler === null || handler === void 0 ? void 0 : handler();
+            }
+        };
+    }, [key, handler]);
+    useEffect(() => {
+        const eventListener = (event) => {
+            var _a;
+            (_a = eventListenerRef.current) === null || _a === void 0 ? void 0 : _a.call(eventListenerRef, event);
+        };
+        window.addEventListener('keydown', eventListener);
+        return () => {
+            window.removeEventListener('keydown', eventListener);
+        };
+    }, []);
+};
+export default useKeypress;

package/build/index.d.ts

@@ -17,6 +17,7 @@ export { default as InlineCardGroup } from './components/InlineCard/InlineCardGr
 export { default as Input } from './components/Input/Input.component';
 export { default as Heading } from './components/Heading/Heading.component';
 export { default as LiveInput } from './components/LiveInput/LiveInput.component';
+export { default as LiveList } from './components/LiveList/LiveList.component';
 export { default as Loader } from './components/Loader/Loader.component';
 export { default as Menu } from './components/Menu/Menu.component';
 export { default as Modal } from './components/Modal/Modal.component';

package/build/index.js

@@ -17,6 +17,7 @@ export { default as InlineCardGroup } from './components/InlineCard/InlineCardGr
 export { default as Input } from './components/Input/Input.component';
 export { default as Heading } from './components/Heading/Heading.component';
 export { default as LiveInput } from './components/LiveInput/LiveInput.component';
+export { default as LiveList } from './components/LiveList/LiveList.component';
 export { default as Loader } from './components/Loader/Loader.component';
 export { default as Menu } from './components/Menu/Menu.component';
 export { default as Modal } from './components/Modal/Modal.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.16.3",
+  "version": "0.17.2",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -31,6 +31,7 @@
     "@types/react-dom": "^17.0.9",
     "@types/spark-md5": "^3.0.2",
     "@types/styled-components": "^5.1.4",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^4.9.1",
     "@typescript-eslint/parser": "^4.9.1",
     "babel-loader": "^8.2.2",
@@ -60,6 +61,7 @@
     "identicon.js": "^2.3.3",
     "qrcode": "^1.4.4",
     "react-use-measure": "^2.1.1",
-    "spark-md5": "^3.0.1"
+    "spark-md5": "^3.0.1",
+    "uuid": "^8.3.2"
   }
 }