✨ Basic drag and drop

Author: ajnart

next.config.js

@@ -5,7 +5,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 });
 
 module.exports = withBundleAnalyzer({
-  reactStrictMode: true,
+  reactStrictMode: false,
   eslint: {
     ignoreDuringBuilds: true,
   },

package.json

@@ -1,12 +1,12 @@
 {
-	"name": "homarr",
-	"version": "0.4.0",
-	"private": "false",
-	"description": "Homarr - A homepage for your server.",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/ajnart/homarr"
-	},
+  "name": "homarr",
+  "version": "0.4.0",
+  "private": "false",
+  "description": "Homarr - A homepage for your server.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ajnart/homarr"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -45,6 +45,7 @@
     "next": "12.1.5-canary.4",
     "prism-react-renderer": "^1.3.1",
     "react": "18.0.0",
+    "react-beautiful-dnd": "^13.1.0",
     "react-dom": "18.0.0",
     "tabler-icons-react": "^1.46.0"
   },
@@ -62,6 +63,7 @@
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.23",
     "@types/react": "17.0.43",
+    "@types/react-beautiful-dnd": "^13.1.2",
     "@typescript-eslint/eslint-plugin": "^5.16.0",
     "@typescript-eslint/parser": "^5.16.0",
     "babel-loader": "^8.2.4",

src/components/dnd.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { createStyles, Text } from '@mantine/core';
+import { useListState } from '@mantine/hooks';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import AppShelf from './AppShelf/AppShelf';
+
+const useStyles = createStyles((theme) => ({
+  item: {
+    ...theme.fn.focusStyles(),
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: theme.radius.md,
+    border: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
+    }`,
+    padding: `${theme.spacing.sm}px ${theme.spacing.xl}px`,
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
+    marginBottom: theme.spacing.sm,
+  },
+
+  itemDragging: {
+    boxShadow: theme.shadows.sm,
+  },
+
+  symbol: {
+    fontSize: 30,
+    fontWeight: 700,
+    width: 60,
+  },
+}));
+
+interface DndListProps {
+  data: {
+    position: number;
+    mass: number;
+    symbol: string;
+    name: string;
+  }[];
+}
+
+export function DndList({ data }: DndListProps) {
+  const { classes, cx } = useStyles();
+  const [state, handlers] = useListState(data);
+
+  const items = state.map((item, index) => (
+    <Draggable key={item.symbol} index={index} draggableId={item.symbol}>
+      {(provided, snapshot) => (
+        <div
+          className={cx(classes.item, { [classes.itemDragging]: snapshot.isDragging })}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          ref={provided.innerRef}
+        >
+          <Text className={classes.symbol}>{item.symbol}</Text>
+          <div>
+            <Text>{item.name}</Text>
+            <Text color="dimmed" size="sm">
+              Position: {item.position} • Mass: {item.mass}
+            </Text>
+          </div>
+        </div>
+      )}
+    </Draggable>
+  ));
+
+  return (
+    <DragDropContext
+      onDragEnd={({ destination, source }) =>
+        handlers.reorder({ from: source.index, to: destination.index })
+      }
+    >
+      <Droppable droppableId="dnd-list" direction="vertical">
+        {(provided) => (
+          <div {...provided.droppableProps} ref={provided.innerRef}>
+            {items}
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+}

src/pages/_document.tsx

@@ -1,12 +1,14 @@
 import Document, { DocumentContext } from 'next/document';
 import { ServerStyles, createStylesServer } from '@mantine/next';
+import { resetServerContext } from 'react-beautiful-dnd';
 
 const stylesServer = createStylesServer();
 
 export default class _Document extends Document {
   static async getInitialProps(ctx: DocumentContext) {
-    const initialProps = await Document.getInitialProps(ctx);
+    resetServerContext();
 
+    const initialProps = await Document.getInitialProps(ctx);
     // Add your app specific logic here
 
     return {

src/pages/data.json

@@ -0,0 +1,34 @@
+{
+	"data": [
+		{
+			"position": 6,
+			"mass": 12.011,
+			"symbol": "C",
+			"name": "Carbon"
+		},
+		{
+			"position": 7,
+			"mass": 14.007,
+			"symbol": "N",
+			"name": "Nitrogen"
+		},
+		{
+			"position": 39,
+			"mass": 88.906,
+			"symbol": "Y",
+			"name": "Yttrium"
+		},
+		{
+			"position": 56,
+			"mass": 137.33,
+			"symbol": "Ba",
+			"name": "Barium"
+		},
+		{
+			"position": 58,
+			"mass": 140.12,
+			"symbol": "Ce",
+			"name": "Cerium"
+		}
+	]
+}

src/pages/trydnd.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { DndList } from '../components/dnd';
+
+const data = {
+  data: [
+    {
+      position: 6,
+      mass: 12.011,
+      symbol: 'C',
+      name: 'Carbon',
+    },
+    {
+      position: 7,
+      mass: 14.007,
+      symbol: 'N',
+      name: 'Nitrogen',
+    },
+    {
+      position: 39,
+      mass: 88.906,
+      symbol: 'Y',
+      name: 'Yttrium',
+    },
+    {
+      position: 56,
+      mass: 137.33,
+      symbol: 'Ba',
+      name: 'Barium',
+    },
+    {
+      position: 58,
+      mass: 140.12,
+      symbol: 'Ce',
+      name: 'Cerium',
+    },
+  ],
+};
+
+export default function TryDnd() {
+  return <DndList data={data.data} />;
+}