@dtdot/lego 0.17.21 → 0.18.0

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

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

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

@@ -0,0 +1,13 @@
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+import styled from 'styled-components';
+import Button from '../Button/Button.component';
+const StyledIcon = styled(FontAwesomeIcon) `
+  font-size: 18px;
+`;
+const ActionMenu = ({ variant }) => {
+    return (React.createElement(Button, { variant: variant },
+        React.createElement(StyledIcon, { icon: faEllipsisV })));
+};
+export default ActionMenu;

package/build/components/ActionMenu/ActionMenu.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 Variants: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ActionMenu } from '../..';
+/* eslint-disable @typescript-eslint/no-empty-function */
+export const Standard = () => React.createElement(ActionMenu, null);
+export const Variants = () => (React.createElement(React.Fragment, null,
+    React.createElement(ActionMenu, { variant: 'primary' }),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(ActionMenu, { variant: 'secondary' }),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(ActionMenu, { variant: 'tertiary' })));
+export default {
+    title: 'Components/ActionMenu',
+    component: ActionMenu,
+};

package/build/components/BadgeSelector/BadgeSelector.component.js

@@ -4,6 +4,7 @@ import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
 import { BadgeSpan } from '../Badge/Badge.component';
 const InteractiveBadge = styled(BadgeSpan) `
   cursor: pointer;
+  margin-bottom: 8px;
 
   ${(props) => props.inactive &&
     `
@@ -12,6 +13,9 @@ const InteractiveBadge = styled(BadgeSpan) `
   `}
 `;
 const BadgeSelectorOuter = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+
   ${InteractiveBadge} {
     margin-right: 8px;
   }

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

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

package/build/components/BadgeSelector/BadgeSelector.stories.js

@@ -27,6 +27,67 @@ export const Standard = () => {
     const [value, setValue] = useState(['pending']);
     return React.createElement(BadgeSelector, { options: options, value: value, onChange: setValue });
 };
+const options2 = [
+    {
+        value: 'one',
+        name: 'one',
+        variant: 'info',
+    },
+    {
+        value: 'two',
+        name: 'two',
+        variant: 'info',
+    },
+    {
+        value: 'three',
+        name: 'three',
+        variant: 'info',
+    },
+    {
+        value: 'four',
+        name: 'four',
+        variant: 'info',
+    },
+    {
+        value: 'five',
+        name: 'five',
+        variant: 'info',
+    },
+    {
+        value: 'six',
+        name: 'six',
+        variant: 'info',
+    },
+    {
+        value: 'seven',
+        name: 'seven',
+        variant: 'info',
+    },
+    {
+        value: 'eight',
+        name: 'eight',
+        variant: 'info',
+    },
+    {
+        value: 'nine',
+        name: 'nine',
+        variant: 'info',
+    },
+    {
+        value: 'ten',
+        name: 'ten',
+        variant: 'info',
+    },
+    {
+        value: 'eleven',
+        name: 'eleven',
+        variant: 'info',
+    },
+];
+export const LotsOfBadges = () => {
+    const [value, setValue] = useState(['one']);
+    return React.createElement(BadgeSelector, { options: options2, value: value, onChange: setValue });
+};
 export default {
     title: 'Components/BadgeSelector',
     component: BadgeSelector,

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, transition: { duration: 0.2 } },
+            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, transition: { duration: 0.2 } },
+            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/components/Input/Input.component.d.ts

@@ -6,6 +6,7 @@ export interface IInputProps {
     label?: string;
     placeholder?: string;
     type?: string;
+    autoFocus?: boolean;
     value?: string;
     error?: string;
     onChange?: (value: any) => void;

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

@@ -93,7 +93,7 @@ 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 { label, name, placeholder, type = 'text', autoFocus, 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;
@@ -120,7 +120,7 @@ const Input = React.forwardRef(function ForwardRefInput(props, ref) {
     return (React.createElement("div", null,
         label && React.createElement(InputLabel, { htmlFor: name }, label),
         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: getValue(value, contextValue), onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }),
+            React.createElement(StyledInput, { ref: ref, variants: inputVariants, transition: { type: 'spring', duration: 0.3 }, type: type, name: name, placeholder: placeholder, value: getValue(value, contextValue), onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, autoFocus: autoFocus }),
             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 }))),

package/build/index.d.ts

@@ -1,4 +1,5 @@
 export { default as BodyStyle } from './global/BodyStyle.component';
+export { default as ActionMenu } from './components/ActionMenu/ActionMenu.component';
 export { default as ActionMessage } from './components/ActionMessage/ActionMessage.component';
 export { default as Alert } from './components/Alert/Alert.component';
 export { default as Badge } from './components/Badge/Badge.component';
@@ -7,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

@@ -1,4 +1,5 @@
 export { default as BodyStyle } from './global/BodyStyle.component';
+export { default as ActionMenu } from './components/ActionMenu/ActionMenu.component';
 export { default as ActionMessage } from './components/ActionMessage/ActionMessage.component';
 export { default as Alert } from './components/Alert/Alert.component';
 export { default as Badge } from './components/Badge/Badge.component';
@@ -7,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.21",
+  "version": "0.18.0",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {