Add screenshot + remove useless dependency

package.json

@@ -10,7 +10,6 @@
     "framer-motion": "^3.2.2-rc.1",
     "moment": "^2.29.1",
     "react": "^17.0.1",
-    "react-beautiful-dnd": "^13.0.0",
     "react-cool-dimensions": "^1.2.0",
     "react-dom": "^17.0.1",
     "react-icons": "^4.1.0"

src/Configurator/Components/DragDrop/index.js

@@ -0,0 +1,184 @@
+import React, { useState } from 'react';
+import styles from './styles';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+
+const reorder = (list, startIndex, endIndex) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+
+    return result;
+};
+
+/**
+ * Moves an item from one list to another list.
+ */
+const move = (source, destination, droppableSource, droppableDestination) => {
+    const sourceClone = Array.from(source);
+    const destClone = Array.from(destination);
+    const [removed] = sourceClone.splice(droppableSource.index, 1);
+
+    destClone.splice(droppableDestination.index, 0, removed);
+
+    return {
+        sourceClone,
+        destClone
+    };
+
+};
+
+
+const DragDrop = ({ items }) => {
+
+    const [inUse, setInUse] = useState([]);
+    const [available, setAvailable] = useState([
+        'Status',
+        'ETA',
+        'Elapsed',
+        'Hotend',
+        'Bed'
+    ])
+
+    const getList = (droppableId) => {
+
+        const isInUse = droppableId === 'inuse';
+
+        return {
+            list: isInUse ? inUse : available,
+            setList: isInUse ? setInUse : setAvailable 
+        }
+    }
+
+    const onDragEnd = ({ source, destination }) => {
+
+
+        if (!destination) {
+            return;
+        }
+
+        if (source.droppableId === destination.droppableId) {
+
+            const {list, setList} = getList(source.droppableId)
+
+            items = reorder(
+                list,
+                source.index,
+                destination.index
+            );
+
+            setList(items)
+
+        } else {
+
+            const { 
+                list: sourceList, 
+                setList: setSourceList 
+            } = getList(source.droppableId);
+
+            const { 
+                list: destList, 
+                setList: setDestList 
+            } = getList(destination.droppableId);
+
+            const {
+                sourceClone,
+                destClone
+            } = move(
+                sourceList,
+                destList,
+                source,
+                destination
+            );
+
+            setSourceList(sourceClone);
+            setDestList(destClone);
+        }
+    };
+
+    return (
+        <div style={{ ...styles.DragDrop }}>
+
+
+            <DragDropContext onDragEnd={onDragEnd}>
+
+                <div style={{ ...styles.Column }}>
+                    <p style={{ ...styles.ColumnText }}>In Use</p>
+                    <Droppable droppableId="inuse">
+                        {(provided, snapshot) => (
+                            <div
+                                ref={provided.innerRef}
+                                style={{ ...styles.DragDropArea }}>
+                                {inUse.map((item, index) => (
+                                    <Draggable
+                                        key={item}
+                                        draggableId={item}
+                                        index={index}>
+                                        {(provided, snapshot) => (
+                                            <div
+                                                ref={provided.innerRef}
+                                                {...provided.draggableProps}
+                                                {...provided.dragHandleProps}
+                                                style={{
+                                                    width: snapshot.isDragging ? 'auto' : '100%',
+                                                    ...provided.draggableProps.style,
+                                                    ...styles.Item
+                                                }}
+                                            >
+                                                {item}
+                                            </div>
+                                        )}
+                                    </Draggable>
+                                ))}
+                                {provided.placeholder}
+                            </div>
+                        )}
+                    </Droppable>
+                </div>
+
+                <div style={{ ...styles.Column }}>
+                    <p style={{ ...styles.ColumnText }}>Available</p>
+                    <Droppable droppableId="available">
+                        {(provided, snapshot) => (
+                            <div
+                                ref={provided.innerRef}
+                                style={{ ...styles.DragDropArea }}>
+                                {available.map((item, index) => (
+                                    <Draggable
+                                        key={item}
+                                        draggableId={item}
+                                        index={index}>
+                                        {(provided, snapshot) => (
+                                            <div
+                                                ref={provided.innerRef}
+                                                {...provided.draggableProps}
+                                                {...provided.dragHandleProps}
+                                                style={{
+                                                    width: snapshot.isDragging ? 'auto' : '100%',
+                                                    ...provided.draggableProps.style,
+                                                    ...styles.Item
+                                                }}
+                                            >
+                                                {item}
+                                            </div>
+                                        )}
+                                    </Draggable>
+                                ))}
+                                {provided.placeholder}
+                            </div>
+                        )}
+                    </Droppable>
+                </div>
+
+
+
+            </DragDropContext>
+
+
+
+
+        </div >
+    )
+
+};
+
+export default DragDrop;

src/Configurator/Components/DragDrop/styles.js

@@ -0,0 +1,54 @@
+
+const styles = {
+
+    DragDrop: {
+        width: '100%',
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        background: 'var( --ha-card-background, var(--card-background-color, white) )'
+    },
+
+    Column: {
+        width: 'calc(50% - 16px)',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        borderRadius: 8,
+        padding: '8px 16px',
+        backgroundColor: 'rgba(0,0,0,0.05)',
+        boxSizing: 'border-box',
+    },
+
+    ColumnText: {
+        margin: 0,
+        fontWeight: 'bold',
+        fontSize: 14,
+        width: '100%',
+        textAlign: 'center'
+    },
+
+    DragDropArea: {
+        width: '100%',
+        boxSizing: 'border-box',
+        minHeight: 100,
+    },
+
+    Item: {
+        margin: '8px 0', 
+        backgroundColor: 'rgba(0,0,0,0.1)',
+        borderRadius: 8,
+        boxSizing: 'border-box',
+        color: 'var(--primary-text-color)',
+        fontSize: 14,
+        fontWeight: 'bold',
+        textAlign: 'center',
+        lineHeight: '42px'
+    }
+
+};
+
+export default styles;

src/Configurator/Components/Input/index.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+
+import styles from './styles';
+
+const Input = ({ initial, placeholder, onUpdate = (v) => {} }) => {
+
+    const [value, setValue] = useState(initial);
+    const [active, setActive] = useState(false);
+
+    const onChange = (e) => {
+        const val = e.target.value;
+        setValue(val);
+        onUpdate(val);
+    }
+
+    return (
+        <div style={{ ...styles.Wrapper }}>
+            <motion.input
+                animate={{
+                    backgroundColor: active ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.05)'
+                }}
+                transition={{
+                    duration: 0.15,
+                    ease: 'easeInOut'
+                }}
+                style={{ ...styles.Input }}
+                placeholder={placeholder}
+                value={value}
+                onChange={onChange}
+                onFocus={() => setActive(true)}
+                onBlur={() => setActive(false)}
+            />
+        </div>
+
+    )
+
+}
+
+export default Input;

src/Configurator/Components/Input/styles.js

@@ -0,0 +1,23 @@
+const styles = {
+    Wrapper: {
+        width: '100%',
+        background: 'var( --ha-card-background, var(--card-background-color, white) )'
+    },
+    Input: {
+        width: '100%',
+        border: 'none',
+        outline: 'none',
+        padding: '0 16px',
+        boxSizing: 'border-box',
+        fontSize: 16,
+        fontWeight: 'bold',
+        lineHeight: '48px',
+        borderRadius: 8,
+        textAlign: 'left',
+        cursor: 'text',
+        backgroundColor: 'rgba(0,0,0,0.05)',
+        color: 'var(--primary-text-color)'
+    }
+};
+
+export default styles;