@dtdot/lego 0.17.23 → 0.18.0

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/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.0",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {