@dtdot/lego 0.17.23 → 0.18.4

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

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { ColourVariant } from '../../theme/theme.types';
+import { IActionMenuItem } from './_ActionMenu.types';
 export interface ActionMenuProps {
+    items: IActionMenuItem[];
     variant?: ColourVariant;
 }
-declare const ActionMenu: ({ variant }: ActionMenuProps) => JSX.Element;
+declare const ActionMenu: ({ items, variant }: ActionMenuProps) => JSX.Element;
 export default ActionMenu;

package/build/components/ActionMenu/ActionMenu.component.js

@@ -1,13 +1,52 @@
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
 import styled from 'styled-components';
+import { usePopper } from 'react-popper';
 import Button from '../Button/Button.component';
+import ActionMenuPanel from './_ActionMenuPanel.component';
 const StyledIcon = styled(FontAwesomeIcon) `
   font-size: 18px;
 `;
-const ActionMenu = ({ variant }) => {
-    return (React.createElement(Button, { variant: variant },
-        React.createElement(StyledIcon, { icon: faEllipsisV })));
+const offsetFn = () => [70, 4];
+const ActionMenu = ({ items, variant }) => {
+    const [shown, setShown] = useState(false);
+    const [referenceElement, setReferenceElement] = useState();
+    const [popperElement, setPopperElement] = useState();
+    const { styles, attributes } = usePopper(referenceElement, popperElement, {
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: offsetFn,
+                },
+            },
+        ],
+    });
+    const handleGlobalClick = useCallback((event) => {
+        if (!popperElement?.contains(event.target)) {
+            setShown(false);
+        }
+    }, [setShown, popperElement]);
+    useEffect(() => {
+        document.addEventListener('mouseup', handleGlobalClick);
+        return () => {
+            document.removeEventListener('mouseup', handleGlobalClick);
+        };
+    }, [handleGlobalClick, popperElement]);
+    const augmentedItems = items.map((item) => ({
+        ...item,
+        onClick: () => {
+            setShown(false);
+            item.onClick();
+        },
+    }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { variant: variant, ref: setReferenceElement, onClick: () => setShown(true) },
+            React.createElement(StyledIcon, { icon: faEllipsisV })),
+        shown &&
+            ReactDOM.createPortal(React.createElement("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper },
+                React.createElement(ActionMenuPanel, { items: augmentedItems })), document.querySelector('body'))));
 };
 export default ActionMenu;

package/build/components/ActionMenu/ActionMenu.stories.js

@@ -1,15 +1,47 @@
 import React from 'react';
 import { ActionMenu } from '../..';
 /* eslint-disable @typescript-eslint/no-empty-function */
-export const Standard = () => React.createElement(ActionMenu, null);
+const items = [
+    {
+        label: 'Angry Lama',
+        onClick: () => {
+            console.log('Item 1 clicked');
+        },
+    },
+    {
+        label: 'Frightened Frog',
+        onClick: () => {
+            console.log('Item 2 clicked');
+        },
+    },
+    {
+        label: 'Hungry Bear',
+        onClick: () => {
+            console.log('Item 3 clicked');
+        },
+    },
+    {
+        label: 'Crazy Koala',
+        onClick: () => {
+            console.log('Item 4 clicked');
+        },
+    },
+    {
+        label: 'Dizzy Snake',
+        onClick: () => {
+            console.log('Item 5 clicked');
+        },
+    },
+];
+export const Standard = () => React.createElement(ActionMenu, { items: items, variant: 'tertiary' });
 export const Variants = () => (React.createElement(React.Fragment, null,
-    React.createElement(ActionMenu, { variant: 'primary' }),
+    React.createElement(ActionMenu, { items: items, variant: 'primary' }),
     React.createElement("br", null),
     React.createElement("br", null),
-    React.createElement(ActionMenu, { variant: 'secondary' }),
+    React.createElement(ActionMenu, { items: items, variant: 'secondary' }),
     React.createElement("br", null),
     React.createElement("br", null),
-    React.createElement(ActionMenu, { variant: 'tertiary' })));
+    React.createElement(ActionMenu, { items: items, variant: 'tertiary' })));
 export default {
     title: 'Components/ActionMenu',
     component: ActionMenu,

package/build/components/ActionMenu/_ActionMenu.types.d.ts

@@ -0,0 +1,4 @@
+export interface IActionMenuItem {
+    label: string;
+    onClick: () => void;
+}

package/build/components/ActionMenu/_ActionMenu.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/ActionMenu/_ActionMenuItem.component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface ActionMenuItemProps {
+    label: string;
+    onClick: () => void;
+}
+declare const ActionMenuItem: ({ label, onClick }: ActionMenuItemProps) => JSX.Element;
+export default ActionMenuItem;

package/build/components/ActionMenu/_ActionMenuItem.component.js

@@ -0,0 +1,18 @@
+import { motion } from 'framer-motion';
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+const ActionMenuItemOuter = styled(motion.div) `
+  padding: 12px 16px;
+  cursor: pointer;
+
+  color: ${(props) => props.theme.colours.defaultFont};
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+`;
+const ActionMenuItem = ({ label, onClick }) => {
+    const theme = useTheme();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ActionMenuItemOuter, { style: { backgroundColor: theme.colours.tertiary.main }, whileHover: { backgroundColor: theme.colours.tertiary.hover }, onClick: onClick }, label)));
+};
+export default ActionMenuItem;

package/build/components/ActionMenu/_ActionMenuPanel.component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IActionMenuItem } from './_ActionMenu.types';
+export interface ActionMenuPanelProps {
+    items: IActionMenuItem[];
+}
+declare const ActionMenuPanel: ({ items }: ActionMenuPanelProps) => JSX.Element;
+export default ActionMenuPanel;

package/build/components/ActionMenu/_ActionMenuPanel.component.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import ActionMenuItem from './_ActionMenuItem.component';
+const ActionMenuPanelOuter = styled.div `
+  background-color: ${(props) => props.theme.colours.tertiary.main};
+  min-width: 160px;
+`;
+const ActionMenuPanel = ({ items }) => (React.createElement(ActionMenuPanelOuter, null, items.map((item) => (React.createElement(ActionMenuItem, { key: item.label, label: item.label, onClick: item.onClick })))));
+export default ActionMenuPanel;

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

@@ -7,5 +7,5 @@ export interface ButtonProps {
     type?: 'submit';
     onClick?: () => void;
 }
-declare const Button: ({ children, loading, variant, type, onClick }: ButtonProps) => JSX.Element;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<unknown>>;
 export default Button;

package/build/components/Button/Button.component.js

@@ -53,8 +53,9 @@ const ButtonSpinner = styled.div `
     animation-iteration-count: infinite;
   }
 `;
-const Button = ({ children, loading, variant = 'primary', type, onClick }) => {
+const Button = React.forwardRef(function Button(props, ref) {
+    const { children, loading, variant = 'primary', type, onClick } = props;
     const { width, height, alignSelf, marginTop } = useContext(ButtonContext);
-    return (React.createElement(StyledButton, { width: width, height: height, alignSelf: alignSelf, marginTop: marginTop, variant: variant, type: type, onClick: onClick }, loading ? React.createElement(ButtonSpinner, { variant: variant }) : children));
-};
+    return (React.createElement(StyledButton, { ref: ref, width: width, height: height, alignSelf: alignSelf, marginTop: marginTop, variant: variant, type: type, onClick: onClick }, loading ? React.createElement(ButtonSpinner, { variant: variant }) : children));
+});
 export default Button;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface ChecklistItemProps {
+    id: string;
+    label: string;
+}
+export interface ChecklistProps {
+    items: ChecklistItemProps[];
+    value: string[];
+    onChange: (value: string[]) => void;
+}
+declare const Checklist: ({ items, value, onChange }: ChecklistProps) => JSX.Element;
+export default Checklist;

package/build/components/Checklist/Checklist.component.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { motion, LayoutGroup } from 'framer-motion';
+import ChecklistItem from './_ChecklistItem.component';
+const ListDivider = styled.div `
+  width: 100%;
+  height: 0px;
+
+  padding: 20px 0;
+`;
+const Checklist = ({ items, value, onChange }) => {
+    const [checkedOrder, setCheckedOrder] = useState([]);
+    useEffect(() => {
+        if (value.some((id) => !checkedOrder.includes(id))) {
+            const newCheckedOrder = [...checkedOrder];
+            value.forEach((valueId) => {
+                if (!newCheckedOrder.includes(valueId)) {
+                    newCheckedOrder.push(valueId);
+                }
+            });
+            setCheckedOrder(newCheckedOrder);
+        }
+    }, [value, checkedOrder, setCheckedOrder]);
+    const handleChange = (id, checked) => {
+        if (checked && !value.includes(id)) {
+            onChange([...value, id]);
+            setCheckedOrder([id, ...checkedOrder]);
+        }
+        else if (!checked && value.includes(id)) {
+            onChange(value.filter((_id) => _id !== id));
+            setCheckedOrder(checkedOrder.filter((_id) => _id !== id));
+        }
+    };
+    const checkedItems = items
+        .filter((item) => value.includes(item.id))
+        .sort((a, b) => checkedOrder.indexOf(a.id) - checkedOrder.indexOf(b.id));
+    const unCheckedItems = items.filter((item) => !value.includes(item.id));
+    return (React.createElement(LayoutGroup, null,
+        unCheckedItems.map((item) => (React.createElement(motion.div, { layoutId: item.id, key: item.id },
+            React.createElement(ChecklistItem, { label: item.label, value: value.includes(item.id), onChange: (checked) => handleChange(item.id, checked) })))),
+        checkedItems.length ? React.createElement(ListDivider, null) : null,
+        checkedItems.map((item) => (React.createElement(motion.div, { layoutId: item.id, key: item.id },
+            React.createElement(ChecklistItem, { label: item.label, value: value.includes(item.id), onChange: (checked) => handleChange(item.id, checked) }))))));
+};
+export default Checklist;

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

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

package/build/components/Checklist/Checklist.stories.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { Checklist } from '../..';
+const items = [
+    {
+        id: '1',
+        value: 'one',
+        label: 'one',
+    },
+    {
+        id: '2',
+        value: 'two',
+        label: 'two',
+    },
+    {
+        id: '3',
+        value: 'three',
+        label: 'three',
+    },
+    {
+        id: '4',
+        value: 'four',
+        label: 'four',
+    },
+    {
+        id: '5',
+        value: 'five',
+        label: 'five',
+    },
+    {
+        id: '6',
+        value: 'six',
+        label: 'six',
+    },
+];
+export const Standard = () => {
+    const [value, setValue] = useState(['2', '4']);
+    return React.createElement(Checklist, { items: items, value: value, onChange: setValue });
+};
+export default {
+    title: 'Components/Checklist',
+    component: Checklist,
+};

package/build/components/Checklist/_ChecklistItem.component.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface ChecklistItemProps {
+    label: string;
+    value: boolean;
+    onChange: (value: boolean) => void;
+}
+declare const ChecklistItem: ({ label, value, onChange }: ChecklistItemProps) => JSX.Element;
+export default ChecklistItem;

package/build/components/Checklist/_ChecklistItem.component.js

@@ -0,0 +1,78 @@
+import { motion } from 'framer-motion';
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+const Outerlabel = styled(motion.label) `
+  position: relative;
+  margin-bottom: 4px;
+  padding: 4px;
+
+  display: flex;
+  align-items: center;
+
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+  color: ${(props) => (props.checked ? props.theme.colours.defaultBorder : props.theme.colours.defaultFont)};
+
+  background-color: ${(props) => props.theme.colours.background};
+
+  user-select: none;
+  cursor: pointer;
+`;
+const HiddenCheckbox = styled.input `
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+`;
+const Checkmark = styled.div `
+  position: relative;
+  height: 24px;
+  width: 24px;
+  margin-right: 8px;
+  background-color: ${(props) => props.theme.colours.cardBackground};
+
+  &:after {
+    content: '';
+    position: absolute;
+    display: ${(props) => (props.checked ? 'block' : 'none')};
+
+    left: 9px;
+    top: 5px;
+    width: 5px;
+    height: 10px;
+    border: solid ${(props) => props.theme.colours.defaultFont};
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+`;
+const Strikethrough = styled.div `
+  position: absolute;
+  color: transparent;
+  height: 1px;
+
+  margin-left: 30px;
+  padding-right: 2px;
+  padding-left: 2px;
+  background-color: ${(props) => props.theme.colours.defaultBorder};
+`;
+const ChecklistItem = ({ label, value, onChange }) => {
+    const theme = useTheme();
+    const handleChange = (event) => {
+        if (event.target.checked) {
+            onChange(true);
+        }
+        else {
+            onChange(false);
+        }
+    };
+    return (React.createElement(Outerlabel, { checked: value, whileHover: { backgroundColor: theme.colours.cardBackground } },
+        React.createElement(Checkmark, { checked: value }),
+        label,
+        React.createElement(HiddenCheckbox, { type: 'checkbox', checked: value, onChange: handleChange }),
+        value && React.createElement(Strikethrough, null, label)));
+};
+export default ChecklistItem;

package/build/index.d.ts

@@ -8,6 +8,7 @@ export { default as Button } from './components/Button/Button.component';
 export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.component';
 export { default as Card } from './components/Card/Card.component';
 export { default as CardGroup } from './components/Card/CardGroup.component';
+export { default as Checklist } from './components/Checklist/Checklist.component';
 export { default as ControlGroup } from './components/ControlGroup/ControlGroup.component';
 export { default as FancyCheckbox } from './components/FancyCheckbox/FancyCheckbox.component';
 export { default as Form } from './components/Form/Form.component';

package/build/index.js

@@ -8,6 +8,7 @@ export { default as Button } from './components/Button/Button.component';
 export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.component';
 export { default as Card } from './components/Card/Card.component';
 export { default as CardGroup } from './components/Card/CardGroup.component';
+export { default as Checklist } from './components/Checklist/Checklist.component';
 export { default as ControlGroup } from './components/ControlGroup/ControlGroup.component';
 export { default as FancyCheckbox } from './components/FancyCheckbox/FancyCheckbox.component';
 export { default as Form } from './components/Form/Form.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.17.23",
+  "version": "0.18.4",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -45,21 +45,23 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "storybook-addon-styled-component-theme": "^1.3.0",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.5",
     "typescript": "^4.5.5"
   },
   "peerDependencies": {
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "styled-components": "^5.2.1"
+    "styled-components": "^5.3.5"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.13",
+    "@popperjs/core": "^2.11.4",
     "framer-motion": "^6.2.8",
     "identicon.js": "^2.3.3",
     "qrcode": "^1.5.0",
+    "react-popper": "^2.2.5",
     "react-use-measure": "^2.1.1",
     "spark-md5": "^3.0.2",
     "uuid": "^8.3.2"