@dtdot/lego 0.17.0 → 0.17.1

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<T>(key: string): {
-    value: T;
+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,14 +1,16 @@
-/// <reference types="react" />
-export declare const StyledInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+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, onFocus, onBlur }: 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,12 +21,12 @@ const InputLabel = styled.label `
   font-family: ${(props) => props.theme.fonts.default.family};
   font-size: ${(props) => props.theme.fonts.default.size};
 `;
-export const StyledInput = styled.input `
+export const InputStyles = css `
   outline: none;
   box-shadow: none;
 
   width: 100%;
-  height: 48px;
+  height: ${INPUT_HEIGHT}px;
   padding: 0 12px;
 
   font-family: ${(props) => props.theme.fonts.default.family};
@@ -40,8 +50,52 @@ export const StyledInput = styled.input `
     color: ${(props) => getThemeControlColours(props.theme).placeholder};
   }
 `;
-const Input = ({ label, name, placeholder, type = 'text', value, onChange, onFocus, onBlur }) => {
-    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 +104,25 @@ const Input = ({ label, name, placeholder, type = 'text', value, onChange, onFoc
             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, onFocus: onFocus, onBlur: onBlur })));
-};
+        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/LiveList/LiveList.component.js

@@ -1,6 +1,7 @@
 import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { useContext, useEffect } from 'react';
+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';
@@ -14,11 +15,12 @@ const AddRow = styled.div `
 
   margin-top: 4px;
 `;
-const AddRowInner = styled.div `
+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};
@@ -27,23 +29,34 @@ const AddRowInner = styled.div `
 const IconContainer = styled.div `
   padding-right: 4px;
 `;
-const LiveList = ({ value: inputValue, name, onChange: inputOnChange }) => {
+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, onChange: contextOnChange } = useFormNode(name);
-    const value = contextValue || inputValue;
-    const onChange = contextOnChange || inputOnChange;
+    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)) {
-            onChange([{ id: uuidv4(), value: '' }]);
+            wrappedOnChange([{ id: uuidv4(), value: '' }]);
         }
-    }, [value, onChange]);
+    }, [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);
-        onChange(newValue);
+        wrappedOnChange(newValue);
         requestFocus(newItem.id);
     });
     useKeypress('Backspace', () => {
@@ -57,7 +70,7 @@ const LiveList = ({ value: inputValue, name, onChange: inputOnChange }) => {
         }
         const focusedIndex = value.findIndex((val) => val.id === focusedId);
         const prevId = focusedIndex > 0 ? value[focusedIndex - 1].id : undefined;
-        onChange(value.filter((val) => val.id !== focusedId));
+        wrappedOnChange(value.filter((val) => val.id !== focusedId));
         if (prevId) {
             // Timeout to prevent deleting the last char of the previous row
             setTimeout(() => {
@@ -66,28 +79,28 @@ const LiveList = ({ value: inputValue, name, onChange: inputOnChange }) => {
         }
     });
     const handleRowChange = (updateId, updateValue) => {
-        onChange(value.map((v) => (v.id === updateId ? { ...v, value: updateValue } : v)));
+        wrappedOnChange(value.map((v) => (v.id === updateId ? { ...v, value: updateValue } : v)));
     };
     const handleRowRemove = (id) => {
         if (value.length === 1) {
             const withValueCleared = [...value];
             value[0].value = '';
-            onChange(withValueCleared);
+            wrappedOnChange(withValueCleared);
             return;
         }
-        onChange(value.filter((val) => val.id !== id));
+        wrappedOnChange(value.filter((val) => val.id !== id));
     };
     const handleRowAdd = () => {
         const newItem = { id: uuidv4(), value: '' };
-        onChange([...value, newItem]);
+        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, onChange: (newVal) => handleRowChange(val.id, newVal), onRemove: () => handleRowRemove(val.id) }))),
+        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, { onClick: handleRowAdd },
+            React.createElement(AddRowInner, { style: { scale: 1 }, whileHover: 'hover', variants: addVariants, onClick: handleRowAdd },
                 React.createElement(IconContainer, null,
                     React.createElement(FontAwesomeIcon, { icon: faPlusCircle })),
                 "add"))));

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

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

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

@@ -1,10 +1,14 @@
 import React, { useState } from 'react';
-import { ControlGroup, Form, Heading, ImageUpload, Input, LiveList, Spacer } from '../..';
+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,
@@ -19,7 +23,26 @@ export const InForm = () => {
             React.createElement(ImageUpload, { name: 'image' }),
             React.createElement(Input, { name: 'name', placeholder: 'Something tasty..' }),
             React.createElement(Heading.FormHeading, null, "Ingredients"),
-            React.createElement(LiveList, { name: 'ingredients', value: value, onChange: setValue }))));
+            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',

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

@@ -2,8 +2,9 @@
 interface LiveListRowProps {
     id: string;
     value: string;
+    error?: string;
     onChange: (value: string) => void;
     onRemove: () => void;
 }
-declare const LiveListRow: ({ id, value, onChange, onRemove }: LiveListRowProps) => JSX.Element;
+declare const LiveListRow: ({ id, value, error, onChange, onRemove }: LiveListRowProps) => JSX.Element;
 export default LiveListRow;

package/build/components/LiveList/_LiveListRow.js

@@ -3,11 +3,13 @@ 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 { StyledInput } from '../Input/Input.component';
 import { FocusContext } from './_FocusContext';
+import Input from '../Input/Input.component';
 const InputContainer = styled(motion.div) `
   position: relative;
-  padding: 2px 0;
+  margin: 2px 0;
+
+  background-color: ${(props) => props.theme.colours.controlBackground};
 `;
 const RemoveContainer = styled(motion.div) `
   position: absolute;
@@ -32,7 +34,7 @@ const removeVariants = {
     hover: { opacity: 1, x: -10 },
     focus: { opacity: 1, x: -10 },
 };
-const LiveListRow = ({ id, value, onChange, onRemove }) => {
+const LiveListRow = ({ id, value, error, onChange, onRemove }) => {
     const { onFocus, onBlur, registerFocusable, deregisterFocusable } = useContext(FocusContext);
     const inputRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
@@ -47,7 +49,7 @@ const LiveListRow = ({ id, value, onChange, onRemove }) => {
         });
     }, [id, registerFocusable, deregisterFocusable]);
     const handleChange = (e) => {
-        onChange(e.target.value);
+        onChange(e);
     };
     const handleFocus = () => {
         setIsFocused(true);
@@ -58,8 +60,8 @@ const LiveListRow = ({ id, value, onChange, onRemove }) => {
         onBlur(id);
     };
     return (React.createElement(InputContainer, { whileHover: 'hover' },
-        React.createElement(StyledInput, { onFocus: handleFocus, onBlur: handleBlur, ref: inputRef, value: value, onChange: handleChange }),
-        React.createElement(RemoveContainer, { animate: isFocused ? 'focus' : undefined, style: { opacity: 0 }, variants: removeVariants, transition: { duration: 0.05 } },
+        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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {