@dtdot/lego 0.17.4 → 0.17.10

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

@@ -6,12 +6,13 @@ export declare type DragVariant = Status;
 export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     size?: InlineCardSize;
+    value?: string;
     gestureLeftIcon?: IconProp;
     gestureLeftVariant?: DragVariant;
     onGestureLeft?: () => void;
 }
 declare const InlineCard: {
-    ({ children, size, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }: InlineCardProps): JSX.Element;
+    ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }: InlineCardProps): JSX.Element;
     Media: ({ children }: import("./_InlineCardMedia.component").InlineCardMediaProps) => JSX.Element;
     Content: ({ children, center }: import("./_InlineCardContent.component").InlineCardContentProps) => JSX.Element;
     Meta: ({ children }: import("./_InlineCardMeta.component").InlineCardMetaProps) => JSX.Element;

package/build/components/InlineCard/InlineCard.component.js

@@ -1,5 +1,5 @@
 import { motion, useMotionValue, useTransform } from 'framer-motion';
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 import useMeasure from 'react-use-measure';
 import { responsive } from '../..';
@@ -8,6 +8,8 @@ import InlineCardContent from './_InlineCardContent.component';
 import InlineCardMedia from './_InlineCardMedia.component';
 import InlineCardMeta from './_InlineCardMeta.component';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import InlineCardSelectionContext from './_InlineCardSelection.context';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
 const CardWrapper = styled.div `
   position: relative;
   height: 64px;
@@ -75,7 +77,38 @@ const CardActionBackground = styled(motion.div) `
   left: 0;
   pointer-events: none;
 `;
-const InlineCard = ({ children, size, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }) => {
+const SelectChecked = styled.div `
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  width: 0;
+  height: 0;
+
+  border-bottom: 48px solid transparent;
+  border-right: 48px solid ${(props) => props.theme.colours.statusInfo.main};
+`;
+const SelectIconContainer = styled.div `
+  position: absolute;
+  left: 0;
+  right: 0;
+
+  width: 48px;
+  height: 48px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding-left: 16px;
+  padding-bottom: 16px;
+
+  color: ${(props) => props.theme.colours.statusInfo.contrast};
+`;
+const InlineCard = ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }) => {
+    const { value: selectedValues, onToggle } = useContext(InlineCardSelectionContext);
+    const isSelectable = !!onToggle;
+    const isSelected = selectedValues?.length && value && selectedValues.includes(value);
     const theme = useTheme();
     const x = useMotionValue(0);
     const [ref, bounds] = useMeasure();
@@ -90,9 +123,20 @@ const InlineCard = ({ children, size, onClick, gestureLeftIcon, gestureLeftVaria
             onGestureLeft();
         }
     };
+    const handleClick = (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        if (onToggle && value) {
+            onToggle(value);
+        }
+    };
     return (React.createElement(CardWrapper, { size: size },
         React.createElement(CardActionBackground, { style: { opacity, backgroundColor: gestureLeftTheme.main } }, gestureLeftIcon && (React.createElement(FontAwesomeIcon, { style: { fontSize: '20px', color: gestureLeftTheme.contrast }, icon: gestureLeftIcon }))),
-        React.createElement(CardOuter, { drag: onGestureLeft ? 'x' : undefined, onDragEnd: handleDragEnd, ref: ref, style: { x }, animate: { x: gestureLeftActivated ? -bounds.width : undefined, opacity: gestureLeftActivated ? 0 : undefined }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick, onClick: onClick }, children)));
+        React.createElement(CardOuter, { drag: onGestureLeft ? 'x' : undefined, onDragEnd: handleDragEnd, ref: ref, style: { x }, animate: { x: gestureLeftActivated ? -bounds.width : undefined, opacity: gestureLeftActivated ? 0 : undefined }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick || isSelectable, onClick: handleClick }, children),
+        isSelectable && isSelected ? (React.createElement(SelectChecked, null,
+            React.createElement(SelectIconContainer, null,
+                React.createElement(FontAwesomeIcon, { icon: faCheck })))) : null));
 };
 InlineCard.Media = InlineCardMedia;
 InlineCard.Content = InlineCardContent;

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

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

package/build/components/InlineCard/InlineCard.stories.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { faCheckCircle, faExclamationTriangle, faInfoCircle, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { Badge, InlineCard, InlineCardGroup } from '../..';
+import { Badge, FocusLayout, Form, InlineCard, InlineCardGroup } from '../..';
+import InlineCardSelection from './InlineCardSelection.component';
 export const Standard = () => (React.createElement(InlineCardGroup, null,
     React.createElement(InlineCard, null,
         React.createElement(InlineCard.Content, null, "Some content")),
@@ -14,7 +15,7 @@ export const Standard = () => (React.createElement(InlineCardGroup, null,
         React.createElement(InlineCard.Content, null, "Clickable card"),
         React.createElement(InlineCard.Meta, null,
             React.createElement(Badge, { variant: 'info' }, "Clickable")))));
-export const WithDrag = () => (React.createElement("div", { style: { maxWidth: '400px' } },
+export const WithDrag = () => (React.createElement(FocusLayout, null,
     React.createElement(InlineCardGroup, null,
         React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faCheckCircle, gestureLeftVariant: 'success' },
             React.createElement(InlineCard.Content, null, "A success gesture")),
@@ -24,6 +25,27 @@ export const WithDrag = () => (React.createElement("div", { style: { maxWidth: '
             React.createElement(InlineCard.Content, null, "A warning gesture")),
         React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faTimes, gestureLeftVariant: 'danger' },
             React.createElement(InlineCard.Content, null, "A danger gesture")))));
+export const WithSelection = () => {
+    const [value, setValue] = useState({ animals: ['lama'] });
+    return (React.createElement(FocusLayout, null,
+        React.createElement(Form, { value: value, onChange: setValue },
+            React.createElement(InlineCardSelection, { name: 'animals' },
+                React.createElement(InlineCardGroup, null,
+                    React.createElement(InlineCard, { value: 'camel' },
+                        React.createElement(InlineCard.Media, null,
+                            React.createElement("img", { src: 'http://3.bp.blogspot.com/-m2w1bFhTLMs/Uyh0xlVCluI/AAAAAAAACjw/G4IhU8b0RhY/w1200-h630-p-k-nu/368692.jpg' })),
+                        React.createElement(InlineCard.Content, null, "A cranky camel")),
+                    React.createElement(InlineCard, { value: 'eagle' },
+                        React.createElement(InlineCard.Media, null,
+                            React.createElement("img", { src: 'https://www.hakaimagazine.com/wp-content/uploads/header-bald-eagle-nests.jpg' })),
+                        React.createElement(InlineCard.Content, null, "A eager eagle")),
+                    React.createElement(InlineCard, { value: 'lama' },
+                        React.createElement(InlineCard.Media, null,
+                            React.createElement("img", { src: 'https://external-preview.redd.it/3KAYF01HBUX-QKwcpo89kHPzScRoZPXZN7o02JepX8E.jpg?auto=webp&s=08bbddec975a8af76de43a33001604099fb0168d' })),
+                        React.createElement(InlineCard.Content, null, "A lazy lama")),
+                    React.createElement(InlineCard, { value: 'iguana' },
+                        React.createElement(InlineCard.Content, null, "An invisible iguana")))))));
+};
 export default {
     title: 'Components/InlineCard',
     component: InlineCard,

package/build/components/InlineCard/InlineCardSelection.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface InlineCardSelectionProps {
+    children: React.ReactNode;
+    name: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+}
+declare const InlineCardSelection: ({ children, name, value: propsValue, onChange: propsOnChange, }: InlineCardSelectionProps) => JSX.Element;
+export default InlineCardSelection;

package/build/components/InlineCard/InlineCardSelection.component.js

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+import useFormNode from '../Form/useFormNode.hook';
+import InlineCardSelectionContext from './_InlineCardSelection.context';
+const InlineCardSelection = ({ children, name, value: propsValue, onChange: propsOnChange, }) => {
+    const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+    const value = contextValue || propsValue || [];
+    const wrappedOnChange = useCallback((val) => {
+        if (propsOnChange) {
+            propsOnChange(val);
+        }
+        if (contextOnChange) {
+            contextOnChange(val);
+        }
+    }, [propsOnChange, contextOnChange]);
+    const handleToggle = (_value) => {
+        if (!value) {
+            return;
+        }
+        if (value.includes(_value)) {
+            wrappedOnChange(value.filter((val) => val !== _value));
+        }
+        else {
+            wrappedOnChange([...value, _value]);
+        }
+    };
+    return (React.createElement(InlineCardSelectionContext.Provider, { value: { value, onToggle: handleToggle } }, children));
+};
+export default InlineCardSelection;

package/build/components/InlineCard/_InlineCardSelection.context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type CardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
+interface InlineCardSelectionContextProps {
+    value?: string[];
+    onToggle?: (value: string) => void;
+}
+declare const InlineCardSelectionContext: import("react").Context<InlineCardSelectionContextProps>;
+export default InlineCardSelectionContext;

package/build/components/InlineCard/_InlineCardSelection.context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const InlineCardSelectionContext = createContext({
+    value: undefined,
+    onToggle: undefined,
+});
+export default InlineCardSelectionContext;

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,7 +65,7 @@ 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);
@@ -97,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/_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/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/build/index.d.ts

@@ -14,6 +14,7 @@ export { default as Notifications } from './components/Notifications/Notificatio
 export { default as ImageUpload } from './components/ImageUpload/ImageUpload.component';
 export { default as InlineCard } from './components/InlineCard/InlineCard.component';
 export { default as InlineCardGroup } from './components/InlineCard/InlineCardGroup.component';
+export { default as InlineCardSelection } from './components/InlineCard/InlineCardSelection.component';
 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';

package/build/index.js

@@ -14,6 +14,7 @@ export { default as Notifications } from './components/Notifications/Notificatio
 export { default as ImageUpload } from './components/ImageUpload/ImageUpload.component';
 export { default as InlineCard } from './components/InlineCard/InlineCard.component';
 export { default as InlineCardGroup } from './components/InlineCard/InlineCardGroup.component';
+export { default as InlineCardSelection } from './components/InlineCard/InlineCardSelection.component';
 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.17.4",
+  "version": "0.17.10",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -17,51 +17,52 @@
     "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",
+    "framer-motion": "^6.2.6",
+    "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": {
+    "framer-motion": "^6.2.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "styled-components": "^5.2.1"
   },
   "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",
     "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"
   }
 }