@dtdot/lego 0.16.4 → 0.17.0

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

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

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const StyledInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
 export interface IInputProps {
     name: string;
     label?: string;
@@ -6,6 +7,8 @@ export interface IInputProps {
     type?: string;
     value?: string;
     onChange?: (value: any) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
-declare const Input: ({ label, name, placeholder, type, value, onChange }: IInputProps) => JSX.Element;
+declare const Input: ({ label, name, placeholder, type, value, onChange, onFocus, onBlur }: IInputProps) => JSX.Element;
 export default Input;

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

@@ -11,7 +11,7 @@ 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 StyledInput = styled.input `
   outline: none;
   box-shadow: none;
 
@@ -40,7 +40,7 @@ const StyledInput = styled.input `
     color: ${(props) => getThemeControlColours(props.theme).placeholder};
   }
 `;
-const Input = ({ label, name, placeholder, type = 'text', value, onChange }) => {
+const Input = ({ label, name, placeholder, type = 'text', value, onChange, onFocus, onBlur }) => {
     const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
     const handleChange = (e) => {
         if (onChange) {
@@ -52,6 +52,6 @@ const Input = ({ label, name, placeholder, type = 'text', value, onChange }) =>
     };
     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(StyledInput, { type: type, name: name, placeholder: placeholder, value: value || contextValue, onChange: handleChange, onFocus: onFocus, onBlur: onBlur })));
 };
 export default 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,95 @@
+import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { 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.div `
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  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 LiveList = ({ value: inputValue, name, onChange: inputOnChange }) => {
+    const { getFocused, requestFocus } = useContext(FocusContext);
+    const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+    const value = contextValue || inputValue;
+    const onChange = contextOnChange || inputOnChange;
+    useEffect(() => {
+        if (!(value === null || value === void 0 ? void 0 : value.length)) {
+            onChange([{ id: uuidv4(), value: '' }]);
+        }
+    }, [value, onChange]);
+    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);
+        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;
+        onChange(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) => {
+        onChange(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);
+            return;
+        }
+        onChange(value.filter((val) => val.id !== id));
+    };
+    const handleRowAdd = () => {
+        const newItem = { id: uuidv4(), value: '' };
+        onChange([...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) }))),
+        React.createElement(AddRow, null,
+            React.createElement(AddRowInner, { 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,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+export declare const InForm: () => 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,27 @@
+import React, { useState } from 'react';
+import { ControlGroup, Form, Heading, ImageUpload, Input, LiveList, Spacer } 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' },
+];
+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', value: value, onChange: setValue }))));
+};
+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,9 @@
+/// <reference types="react" />
+interface LiveListRowProps {
+    id: string;
+    value: string;
+    onChange: (value: string) => void;
+    onRemove: () => void;
+}
+declare const LiveListRow: ({ id, value, onChange, onRemove }: LiveListRowProps) => JSX.Element;
+export default LiveListRow;

package/build/components/LiveList/_LiveListRow.js

@@ -0,0 +1,66 @@
+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 { StyledInput } from '../Input/Input.component';
+import { FocusContext } from './_FocusContext';
+const InputContainer = styled(motion.div) `
+  position: relative;
+  padding: 2px 0;
+`;
+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, 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.target.value);
+    };
+    const handleFocus = () => {
+        setIsFocused(true);
+        onFocus(id);
+    };
+    const handleBlur = () => {
+        setIsFocused(false);
+        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(RemoveInner, { onClick: onRemove },
+                React.createElement(FontAwesomeIcon, { icon: faTimes })))));
+};
+export default LiveListRow;

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.4",
+  "version": "0.17.0",
   "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"
   }
 }