From 184071317943d0ff470098b15a209d199812ac9c Mon Sep 17 00:00:00 2001 From: ajnart Date: Sat, 21 May 2022 10:28:19 +0200 Subject: [PATCH 1/8] :sparkles: Basic drag and drop --- next.config.js | 2 +- package.json | 18 ++++---- src/components/dnd.tsx | 82 ++++++++++++++++++++++++++++++++++++ src/pages/_document.tsx | 4 +- src/pages/data.json | 34 +++++++++++++++ src/pages/trydnd.tsx | 41 ++++++++++++++++++ yarn.lock | 93 ++++++++++++++++++++++++++++++++++++++++- 7 files changed, 263 insertions(+), 11 deletions(-) create mode 100644 src/components/dnd.tsx create mode 100644 src/pages/data.json create mode 100644 src/pages/trydnd.tsx diff --git a/next.config.js b/next.config.js index a5d9163bd..31fc7b641 100644 --- a/next.config.js +++ b/next.config.js @@ -5,7 +5,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({ }); module.exports = withBundleAnalyzer({ - reactStrictMode: true, + reactStrictMode: false, eslint: { ignoreDuringBuilds: true, }, diff --git a/package.json b/package.json index df92b3155..88168fec2 100644 --- a/package.json +++ b/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", diff --git a/src/components/dnd.tsx b/src/components/dnd.tsx new file mode 100644 index 000000000..4c963bc79 --- /dev/null +++ b/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) => ( + + {(provided, snapshot) => ( +
+ {item.symbol} +
+ {item.name} + + Position: {item.position} • Mass: {item.mass} + +
+
+ )} + + )); + + return ( + + handlers.reorder({ from: source.index, to: destination.index }) + } + > + + {(provided) => ( +
+ {items} + {provided.placeholder} +
+ )} + + + ); +} diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index c32cc432b..583172e5e 100644 --- a/src/pages/_document.tsx +++ b/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 { diff --git a/src/pages/data.json b/src/pages/data.json new file mode 100644 index 000000000..6b3f581fe --- /dev/null +++ b/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" + } + ] +} \ No newline at end of file diff --git a/src/pages/trydnd.tsx b/src/pages/trydnd.tsx new file mode 100644 index 000000000..e1a534f98 --- /dev/null +++ b/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 ; +} diff --git a/yarn.lock b/yarn.lock index e9bbd73c0..2f6737d1c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1081,6 +1081,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.15.4": + version "7.18.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.0.tgz#6d77142a19cb6088f0af662af1ada37a604d34ae" + integrity sha512-YMQvx/6nKEaucl0MY56mwIG483xk8SDNdlUwb2Ts6FUpr7fm85DxEmsY18LXBNhcTz6tO6JwZV8w1W06v8UKeg== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.12.7", "@babel/template@^7.16.7", "@babel/template@^7.3.3": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155" @@ -2984,6 +2991,14 @@ dependencies: "@types/unist" "*" +"@types/hoist-non-react-statics@^3.3.0": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/html-minifier-terser@^5.0.0": version "5.1.2" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57" @@ -3118,6 +3133,13 @@ dependencies: parchment "^1.1.2" +"@types/react-beautiful-dnd@^13.1.2": + version "13.1.2" + resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.2.tgz#510405abb09f493afdfd898bf83995dc6385c130" + integrity sha512-+OvPkB8CdE/bGdXKyIhc/Lm2U7UAYCCJgsqmopFmh9gbAudmslkI8eOrPDjg4JhwSE6wytz4a3/wRjKtovHVJg== + dependencies: + "@types/react" "*" + "@types/react-dom@^18.0.0": version "18.0.4" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.4.tgz#dcbcadb277bcf6c411ceff70069424c57797d375" @@ -3125,6 +3147,16 @@ dependencies: "@types/react" "*" +"@types/react-redux@^7.1.20": + version "7.1.24" + resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.24.tgz#6caaff1603aba17b27d20f8ad073e4c077e975c0" + integrity sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ== + dependencies: + "@types/hoist-non-react-statics" "^3.3.0" + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + redux "^4.0.0" + "@types/react-syntax-highlighter@11.0.5": version "11.0.5" resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087" @@ -5043,6 +5075,13 @@ crypto-browserify@^3.11.0: randombytes "^2.0.0" randomfill "^1.0.3" +css-box-model@^1.2.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1" + integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw== + dependencies: + tiny-invariant "^1.0.6" + css-loader@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.6.0.tgz#2e4b2c7e6e2d27f8c8f28f61bffcd2e6c91ef645" @@ -7094,7 +7133,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1: +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -8730,6 +8769,11 @@ memfs@^3.1.2: dependencies: fs-monkey "1.0.3" +memoize-one@^5.1.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + memoizerific@^1.11.3: version "1.11.3" resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a" @@ -10060,6 +10104,11 @@ quill@^1.3.7: parchment "^1.1.4" quill-delta "^3.6.2" +raf-schd@^4.0.2: + version "4.0.3" + resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a" + integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ== + ramda@^0.28.0: version "0.28.0" resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.28.0.tgz#acd785690100337e8b063cab3470019be427cc97" @@ -10103,6 +10152,19 @@ raw-loader@^4.0.2: loader-utils "^2.0.0" schema-utils "^3.0.0" +react-beautiful-dnd@^13.1.0: + version "13.1.0" + resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d" + integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA== + dependencies: + "@babel/runtime" "^7.9.2" + css-box-model "^1.2.0" + memoize-one "^5.1.1" + raf-schd "^4.0.2" + react-redux "^7.2.0" + redux "^4.0.4" + use-memo-one "^1.1.1" + react-colorful@^5.1.2: version "5.5.1" resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.1.tgz#29d9c4e496f2ca784dd2bb5053a3a4340cfaf784" @@ -10236,6 +10298,18 @@ react-quill@2.0.0-beta.4: lodash "^4.17.4" quill "^1.3.7" +react-redux@^7.2.0: + version "7.2.8" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de" + integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw== + dependencies: + "@babel/runtime" "^7.15.4" + "@types/react-redux" "^7.1.20" + hoist-non-react-statics "^3.3.2" + loose-envify "^1.4.0" + prop-types "^15.7.2" + react-is "^17.0.2" + react-refresh@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" @@ -10378,6 +10452,13 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux@^4.0.0, redux@^4.0.4: + version "4.2.0" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13" + integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA== + dependencies: + "@babel/runtime" "^7.9.2" + refractor@^3.1.0: version "3.6.0" resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a" @@ -11562,6 +11643,11 @@ timers-browserify@^2.0.4: dependencies: setimmediate "^1.0.4" +tiny-invariant@^1.0.6: + version "1.2.0" + resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9" + integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg== + tmpl@1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc" @@ -12006,6 +12092,11 @@ use-latest@^1.2.1: dependencies: use-isomorphic-layout-effect "^1.1.1" +use-memo-one@^1.1.1: + version "1.1.2" + resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20" + integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ== + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" From 64dbb9c02530d75a9bf2deef184935d7ae4c84f3 Mon Sep 17 00:00:00 2001 From: ajnart Date: Mon, 23 May 2022 00:04:14 +0200 Subject: [PATCH 2/8] :sparkles: Add drag and drop, fixes #88 --- package.json | 3 +- src/components/dnd/StorableItem.tsx | 20 +++++ src/pages/_document.tsx | 3 - src/pages/trydnd.tsx | 41 ---------- src/pages/trynewdnd.tsx | 71 +++++++++++++++++ yarn.lock | 117 ++++++++-------------------- 6 files changed, 125 insertions(+), 130 deletions(-) create mode 100644 src/components/dnd/StorableItem.tsx delete mode 100644 src/pages/trydnd.tsx create mode 100644 src/pages/trynewdnd.tsx diff --git a/package.json b/package.json index 88168fec2..62cecabfe 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,8 @@ "ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write" }, "dependencies": { + "@dnd-kit/core": "^6.0.1", + "@dnd-kit/sortable": "^7.0.0", "@mantine/core": "^4.2.4", "@mantine/dates": "^4.2.4", "@mantine/dropzone": "^4.2.4", @@ -45,7 +47,6 @@ "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" }, diff --git a/src/components/dnd/StorableItem.tsx b/src/components/dnd/StorableItem.tsx new file mode 100644 index 000000000..950775124 --- /dev/null +++ b/src/components/dnd/StorableItem.tsx @@ -0,0 +1,20 @@ +import { useSortable } from '@dnd-kit/sortable'; +import { CSS } from '@dnd-kit/utilities'; +import { AppShelfItem } from '../AppShelf/AppShelf'; + +export function SortableItem(props: any) { + const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ + id: props.id, + }); + + const style = { + transform: CSS.Transform.toString(transform), + transition, + }; + + return ( +
+ +
+ ); +} diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 583172e5e..abe7984ca 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,13 +1,10 @@ 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) { - resetServerContext(); - const initialProps = await Document.getInitialProps(ctx); // Add your app specific logic here diff --git a/src/pages/trydnd.tsx b/src/pages/trydnd.tsx deleted file mode 100644 index e1a534f98..000000000 --- a/src/pages/trydnd.tsx +++ /dev/null @@ -1,41 +0,0 @@ -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 ; -} diff --git a/src/pages/trynewdnd.tsx b/src/pages/trynewdnd.tsx new file mode 100644 index 000000000..effb3ab5f --- /dev/null +++ b/src/pages/trynewdnd.tsx @@ -0,0 +1,71 @@ +import React, { useState } from 'react'; +import { + closestCenter, + DndContext, + DragOverlay, + KeyboardSensor, + PointerSensor, + useSensor, + useSensors, +} from '@dnd-kit/core'; +import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'; +import { Grid } from '@mantine/core'; +import { SortableItem } from '../components/dnd/StorableItem'; +import { AppShelfItem } from '../components/AppShelf/AppShelf'; +import { useConfig } from '../tools/state'; +import { Config } from '../tools/types'; + +export default function App() { + const [activeId, setActiveId] = useState(null); + const { config, setConfig } = useConfig(); + const sensors = useSensors( + useSensor(PointerSensor), + useSensor(KeyboardSensor, { + coordinateGetter: sortableKeyboardCoordinates, + }) + ); + + return ( + + + + {config.services.map((service) => ( + + + + ))} + + + + {activeId ? ( + e.id === activeId)} id={activeId} /> + ) : null} + + + ); + + function handleDragStart(event) { + const { active } = event; + + setActiveId(active.id); + } + + function handleDragEnd(event) { + const { active, over } = event; + + if (active.id !== over.id) { + const newConfig = { ...config }; + const activeIndex = newConfig.services.findIndex((e) => e.id === active.id); + const overIndex = newConfig.services.findIndex((e) => e.id === over.id); + newConfig.services = arrayMove(newConfig.services, activeIndex, overIndex); + setConfig(newConfig); + } + + setActiveId(null); + } +} diff --git a/yarn.lock b/yarn.lock index 2f6737d1c..3adbee9df 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1081,13 +1081,6 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.15.4": - version "7.18.0" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.0.tgz#6d77142a19cb6088f0af662af1ada37a604d34ae" - integrity sha512-YMQvx/6nKEaucl0MY56mwIG483xk8SDNdlUwb2Ts6FUpr7fm85DxEmsY18LXBNhcTz6tO6JwZV8w1W06v8UKeg== - dependencies: - regenerator-runtime "^0.13.4" - "@babel/template@^7.12.7", "@babel/template@^7.16.7", "@babel/template@^7.3.3": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155" @@ -1149,6 +1142,37 @@ resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70" integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw== +"@dnd-kit/accessibility@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@dnd-kit/accessibility/-/accessibility-3.0.0.tgz#b56e3750414fd907b7d6972b3116aa8f96d07fde" + integrity sha512-QwaQ1IJHQHMMuAGOOYHQSx7h7vMZPfO97aDts8t5N/MY7n2QTDSnW+kF7uRQ1tVBkr6vJ+BqHWG5dlgGvwVjow== + dependencies: + tslib "^2.0.0" + +"@dnd-kit/core@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-6.0.1.tgz#fe1970e4490ae5c911b2837f9b5e55217e048ea7" + integrity sha512-ZyYmh6S1hvEkywdlwh1d0VW6UnkbP4zb0iZwBGHP4eePlPLDl0t18HaXcgbpVcFWQTUAQtEZVIJKUYBJdVQVsA== + dependencies: + "@dnd-kit/accessibility" "^3.0.0" + "@dnd-kit/utilities" "^3.2.0" + tslib "^2.0.0" + +"@dnd-kit/sortable@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@dnd-kit/sortable/-/sortable-7.0.0.tgz#b094b288a8bd37cb74af0ed347b5ca4cfe6ce795" + integrity sha512-Em6d1n18lMmpRnNB9mmBWN/X7wNDnIw26tab+c7H0jCjW9UQ0+lRV+vatB1lLzFZlgQgIas/A/TXZDY16RQA5Q== + dependencies: + "@dnd-kit/utilities" "^3.2.0" + tslib "^2.0.0" + +"@dnd-kit/utilities@^3.2.0": + version "3.2.0" + resolved "https://registry.yarnpkg.com/@dnd-kit/utilities/-/utilities-3.2.0.tgz#b3e956ea63a1347c9d0e1316b037ddcc6140acda" + integrity sha512-h65/pn2IPCCIWwdlR2BMLqRkDxpTEONA+HQW3n765HBijLYGyrnTCLa2YQt8VVjjSQD6EfFlTE6aS2Q/b6nb2g== + dependencies: + tslib "^2.0.0" + "@emotion/cache@11.7.1", "@emotion/cache@^11.7.1": version "11.7.1" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539" @@ -2991,14 +3015,6 @@ dependencies: "@types/unist" "*" -"@types/hoist-non-react-statics@^3.3.0": - version "3.3.1" - resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" - integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== - dependencies: - "@types/react" "*" - hoist-non-react-statics "^3.3.0" - "@types/html-minifier-terser@^5.0.0": version "5.1.2" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57" @@ -3147,16 +3163,6 @@ dependencies: "@types/react" "*" -"@types/react-redux@^7.1.20": - version "7.1.24" - resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.24.tgz#6caaff1603aba17b27d20f8ad073e4c077e975c0" - integrity sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ== - dependencies: - "@types/hoist-non-react-statics" "^3.3.0" - "@types/react" "*" - hoist-non-react-statics "^3.3.0" - redux "^4.0.0" - "@types/react-syntax-highlighter@11.0.5": version "11.0.5" resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087" @@ -5075,13 +5081,6 @@ crypto-browserify@^3.11.0: randombytes "^2.0.0" randomfill "^1.0.3" -css-box-model@^1.2.0: - version "1.2.1" - resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1" - integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw== - dependencies: - tiny-invariant "^1.0.6" - css-loader@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.6.0.tgz#2e4b2c7e6e2d27f8c8f28f61bffcd2e6c91ef645" @@ -7133,7 +7132,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -8769,11 +8768,6 @@ memfs@^3.1.2: dependencies: fs-monkey "1.0.3" -memoize-one@^5.1.1: - version "5.2.1" - resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" - integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== - memoizerific@^1.11.3: version "1.11.3" resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a" @@ -10104,11 +10098,6 @@ quill@^1.3.7: parchment "^1.1.4" quill-delta "^3.6.2" -raf-schd@^4.0.2: - version "4.0.3" - resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a" - integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ== - ramda@^0.28.0: version "0.28.0" resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.28.0.tgz#acd785690100337e8b063cab3470019be427cc97" @@ -10152,19 +10141,6 @@ raw-loader@^4.0.2: loader-utils "^2.0.0" schema-utils "^3.0.0" -react-beautiful-dnd@^13.1.0: - version "13.1.0" - resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d" - integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA== - dependencies: - "@babel/runtime" "^7.9.2" - css-box-model "^1.2.0" - memoize-one "^5.1.1" - raf-schd "^4.0.2" - react-redux "^7.2.0" - redux "^4.0.4" - use-memo-one "^1.1.1" - react-colorful@^5.1.2: version "5.5.1" resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.1.tgz#29d9c4e496f2ca784dd2bb5053a3a4340cfaf784" @@ -10298,18 +10274,6 @@ react-quill@2.0.0-beta.4: lodash "^4.17.4" quill "^1.3.7" -react-redux@^7.2.0: - version "7.2.8" - resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de" - integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw== - dependencies: - "@babel/runtime" "^7.15.4" - "@types/react-redux" "^7.1.20" - hoist-non-react-statics "^3.3.2" - loose-envify "^1.4.0" - prop-types "^15.7.2" - react-is "^17.0.2" - react-refresh@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" @@ -10452,13 +10416,6 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" -redux@^4.0.0, redux@^4.0.4: - version "4.2.0" - resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13" - integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA== - dependencies: - "@babel/runtime" "^7.9.2" - refractor@^3.1.0: version "3.6.0" resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a" @@ -11643,11 +11600,6 @@ timers-browserify@^2.0.4: dependencies: setimmediate "^1.0.4" -tiny-invariant@^1.0.6: - version "1.2.0" - resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9" - integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg== - tmpl@1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc" @@ -12092,11 +12044,6 @@ use-latest@^1.2.1: dependencies: use-isomorphic-layout-effect "^1.1.1" -use-memo-one@^1.1.1: - version "1.1.2" - resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20" - integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ== - use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" From 10d9ffc740ebd8387f02ab59da396a4e276cff2a Mon Sep 17 00:00:00 2001 From: ajnart Date: Mon, 23 May 2022 10:44:31 +0200 Subject: [PATCH 3/8] :rotating_light: Fix compilation for types --- src/components/dnd.tsx | 2 +- src/pages/trynewdnd.tsx | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/dnd.tsx b/src/components/dnd.tsx index 4c963bc79..e41390abf 100644 --- a/src/components/dnd.tsx +++ b/src/components/dnd.tsx @@ -66,7 +66,7 @@ export function DndList({ data }: DndListProps) { return ( - handlers.reorder({ from: source.index, to: destination.index }) + handlers.reorder({ from: source.index, to: (destination && destination.index) ?? -1 }) } > diff --git a/src/pages/trynewdnd.tsx b/src/pages/trynewdnd.tsx index effb3ab5f..7de52d989 100644 --- a/src/pages/trynewdnd.tsx +++ b/src/pages/trynewdnd.tsx @@ -13,7 +13,6 @@ import { Grid } from '@mantine/core'; import { SortableItem } from '../components/dnd/StorableItem'; import { AppShelfItem } from '../components/AppShelf/AppShelf'; import { useConfig } from '../tools/state'; -import { Config } from '../tools/types'; export default function App() { const [activeId, setActiveId] = useState(null); @@ -49,13 +48,13 @@ export default function App() { ); - function handleDragStart(event) { + function handleDragStart(event: any) { const { active } = event; setActiveId(active.id); } - function handleDragEnd(event) { + function handleDragEnd(event: any) { const { active, over } = event; if (active.id !== over.id) { From 72b3097ad1a42a3e7bc2234b8c76b0dc899d523c Mon Sep 17 00:00:00 2001 From: ajnart Date: Mon, 23 May 2022 11:19:26 +0200 Subject: [PATCH 4/8] :coffin: Remove dead code --- package.json | 1 - src/components/dnd.tsx | 82 ------------------------------------------ yarn.lock | 7 ---- 3 files changed, 90 deletions(-) delete mode 100644 src/components/dnd.tsx diff --git a/package.json b/package.json index 62cecabfe..17e2efa3c 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,6 @@ "@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", diff --git a/src/components/dnd.tsx b/src/components/dnd.tsx deleted file mode 100644 index e41390abf..000000000 --- a/src/components/dnd.tsx +++ /dev/null @@ -1,82 +0,0 @@ -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) => ( - - {(provided, snapshot) => ( -
- {item.symbol} -
- {item.name} - - Position: {item.position} • Mass: {item.mass} - -
-
- )} - - )); - - return ( - - handlers.reorder({ from: source.index, to: (destination && destination.index) ?? -1 }) - } - > - - {(provided) => ( -
- {items} - {provided.placeholder} -
- )} - - - ); -} diff --git a/yarn.lock b/yarn.lock index 3adbee9df..4f94cb51e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3149,13 +3149,6 @@ dependencies: parchment "^1.1.2" -"@types/react-beautiful-dnd@^13.1.2": - version "13.1.2" - resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.2.tgz#510405abb09f493afdfd898bf83995dc6385c130" - integrity sha512-+OvPkB8CdE/bGdXKyIhc/Lm2U7UAYCCJgsqmopFmh9gbAudmslkI8eOrPDjg4JhwSE6wytz4a3/wRjKtovHVJg== - dependencies: - "@types/react" "*" - "@types/react-dom@^18.0.0": version "18.0.4" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.4.tgz#dcbcadb277bcf6c411ceff70069424c57797d375" From 94ee90eebb24047a18849e42033c3561e06284a1 Mon Sep 17 00:00:00 2001 From: ajnart Date: Mon, 23 May 2022 11:19:40 +0200 Subject: [PATCH 5/8] :coffin: Remove dead code --- src/components/dnd/StorableItem.tsx | 20 --------- src/pages/trynewdnd.tsx | 70 ----------------------------- 2 files changed, 90 deletions(-) delete mode 100644 src/components/dnd/StorableItem.tsx delete mode 100644 src/pages/trynewdnd.tsx diff --git a/src/components/dnd/StorableItem.tsx b/src/components/dnd/StorableItem.tsx deleted file mode 100644 index 950775124..000000000 --- a/src/components/dnd/StorableItem.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { useSortable } from '@dnd-kit/sortable'; -import { CSS } from '@dnd-kit/utilities'; -import { AppShelfItem } from '../AppShelf/AppShelf'; - -export function SortableItem(props: any) { - const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ - id: props.id, - }); - - const style = { - transform: CSS.Transform.toString(transform), - transition, - }; - - return ( -
- -
- ); -} diff --git a/src/pages/trynewdnd.tsx b/src/pages/trynewdnd.tsx deleted file mode 100644 index 7de52d989..000000000 --- a/src/pages/trynewdnd.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { useState } from 'react'; -import { - closestCenter, - DndContext, - DragOverlay, - KeyboardSensor, - PointerSensor, - useSensor, - useSensors, -} from '@dnd-kit/core'; -import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'; -import { Grid } from '@mantine/core'; -import { SortableItem } from '../components/dnd/StorableItem'; -import { AppShelfItem } from '../components/AppShelf/AppShelf'; -import { useConfig } from '../tools/state'; - -export default function App() { - const [activeId, setActiveId] = useState(null); - const { config, setConfig } = useConfig(); - const sensors = useSensors( - useSensor(PointerSensor), - useSensor(KeyboardSensor, { - coordinateGetter: sortableKeyboardCoordinates, - }) - ); - - return ( - - - - {config.services.map((service) => ( - - - - ))} - - - - {activeId ? ( - e.id === activeId)} id={activeId} /> - ) : null} - - - ); - - function handleDragStart(event: any) { - const { active } = event; - - setActiveId(active.id); - } - - function handleDragEnd(event: any) { - const { active, over } = event; - - if (active.id !== over.id) { - const newConfig = { ...config }; - const activeIndex = newConfig.services.findIndex((e) => e.id === active.id); - const overIndex = newConfig.services.findIndex((e) => e.id === over.id); - newConfig.services = arrayMove(newConfig.services, activeIndex, overIndex); - setConfig(newConfig); - } - - setActiveId(null); - } -} From b69343af56a4926b79b4c8232c29687cb195c7d0 Mon Sep 17 00:00:00 2001 From: ajnart Date: Mon, 23 May 2022 11:20:08 +0200 Subject: [PATCH 6/8] :sparkles: Introduce DND in main app shelf! --- src/components/AppShelf/AddAppShelfItem.tsx | 55 ------ src/components/AppShelf/AppShelf.tsx | 171 +++++++----------- src/components/AppShelf/AppShelfItem.tsx | 123 +++++++++++++ .../AppShelf/AppShelfItemWrapper.tsx | 17 -- src/components/AppShelf/index.ts | 2 + 5 files changed, 194 insertions(+), 174 deletions(-) create mode 100644 src/components/AppShelf/AppShelfItem.tsx delete mode 100644 src/components/AppShelf/AppShelfItemWrapper.tsx create mode 100644 src/components/AppShelf/index.ts diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx index af44ad651..0c92a0e9d 100644 --- a/src/components/AppShelf/AddAppShelfItem.tsx +++ b/src/components/AppShelf/AddAppShelfItem.tsx @@ -6,21 +6,16 @@ import { Image, Button, Select, - AspectRatio, - Text, - Card, LoadingOverlay, ActionIcon, Tooltip, Title, } from '@mantine/core'; import { useForm } from '@mantine/form'; -import { motion } from 'framer-motion'; import { useState } from 'react'; import { Apps } from 'tabler-icons-react'; import { useConfig } from '../../tools/state'; import { ServiceTypeList } from '../../tools/types'; -import { AppShelfItemWrapper } from './AppShelfItemWrapper'; export function AddItemShelfButton(props: any) { const [opened, setOpened] = useState(false); @@ -51,56 +46,6 @@ export function AddItemShelfButton(props: any) { ); } -export default function AddItemShelfItem(props: any) { - const [opened, setOpened] = useState(false); - return ( - <> - setOpened(false)} - title="Add a service" - > - - - - - - - Add a service - - - - - - - setOpened(true)} size={60} /> - - - - - - ); -} - function MatchIcon(name: string, form: any) { fetch( `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx index 9d689e157..2d4bf5768 100644 --- a/src/components/AppShelf/AppShelf.tsx +++ b/src/components/AppShelf/AppShelf.tsx @@ -1,112 +1,79 @@ import React, { useState } from 'react'; -import { motion } from 'framer-motion'; -import { Text, AspectRatio, Card, Image, Center, Grid, createStyles, Anchor } from '@mantine/core'; +import { Grid } from '@mantine/core'; +import { + closestCenter, + DndContext, + DragOverlay, + MouseSensor, + useSensor, + useSensors, +} from '@dnd-kit/core'; +import { arrayMove, SortableContext } from '@dnd-kit/sortable'; import { useConfig } from '../../tools/state'; -import { serviceItem } from '../../tools/types'; -import AppShelfMenu from './AppShelfMenu'; -import PingComponent from '../modules/ping/PingModule'; -const useStyles = createStyles((theme) => ({ - item: { - transition: 'box-shadow 150ms ease, transform 100ms ease', - - '&:hover': { - boxShadow: `${theme.shadows.md} !important`, - transform: 'scale(1.05)', - }, - }, -})); +import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem'; const AppShelf = (props: any) => { - const { config } = useConfig(); + const [activeId, setActiveId] = useState(null); + const { config, setConfig } = useConfig(); + const sensors = useSensors( + useSensor(MouseSensor, { + // Require the mouse to move by 10 pixels before activating + activationConstraint: { + delay: 250, + tolerance: 5, + }, + }) + ); + + function handleDragStart(event: any) { + const { active } = event; + + setActiveId(active.id); + } + + function handleDragEnd(event: any) { + const { active, over } = event; + + if (active.id !== over.id) { + const newConfig = { ...config }; + const activeIndex = newConfig.services.findIndex((e) => e.id === active.id); + const overIndex = newConfig.services.findIndex((e) => e.id === over.id); + newConfig.services = arrayMove(newConfig.services, activeIndex, overIndex); + setConfig(newConfig); + } + + setActiveId(null); + } + return ( - - {config.services.map((service) => ( - - - - ))} - + + + + {config.services.map((service) => ( + + + + ))} + + + + {activeId ? ( + e.id === activeId)} id={activeId} /> + ) : null} + + ); }; -export function AppShelfItem(props: any) { - const { service }: { service: serviceItem } = props; - const [hovering, setHovering] = useState(false); - const { classes, theme } = useStyles(); - return ( - { - setHovering(true); - }} - onHoverEnd={() => { - setHovering(false); - }} - > - - - - - {service.name} - - - - - - -
- - - - { - window.open(service.url); - }} - /> - - - - -
- - - ); -} - export default AppShelf; diff --git a/src/components/AppShelf/AppShelfItem.tsx b/src/components/AppShelf/AppShelfItem.tsx new file mode 100644 index 000000000..585f14bd1 --- /dev/null +++ b/src/components/AppShelf/AppShelfItem.tsx @@ -0,0 +1,123 @@ +import { + Text, + Card, + Anchor, + AspectRatio, + Image, + Center, + createStyles, +} from '@mantine/core'; +import { motion } from 'framer-motion'; +import { useState } from 'react'; +import { useSortable } from '@dnd-kit/sortable'; +import { CSS } from '@dnd-kit/utilities'; +import { serviceItem } from '../../tools/types'; +import PingComponent from '../modules/ping/PingModule'; +import AppShelfMenu from './AppShelfMenu'; + +const useStyles = createStyles((theme) => ({ + item: { + transition: 'box-shadow 150ms ease, transform 100ms ease', + + '&:hover': { + boxShadow: `${theme.shadows.md} !important`, + transform: 'scale(1.05)', + }, + }, +})); + +export function SortableAppShelfItem(props: any) { + const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ + id: props.id, + }); + + const style = { + transform: CSS.Transform.toString(transform), + transition, + }; + + return ( +
+ +
+ ); +} + +export function AppShelfItem(props: any) { + const { service }: { service: serviceItem } = props; + const [hovering, setHovering] = useState(false); + const { classes, theme } = useStyles(); + return ( + { + setHovering(true); + }} + onHoverEnd={() => { + setHovering(false); + }} + > + + + + + {service.name} + + + + + + +
+ + + + { + window.open(service.url); + }} + /> + + + + +
+ + + ); +} diff --git a/src/components/AppShelf/AppShelfItemWrapper.tsx b/src/components/AppShelf/AppShelfItemWrapper.tsx deleted file mode 100644 index ffe409062..000000000 --- a/src/components/AppShelf/AppShelfItemWrapper.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { useMantineTheme, Card } from '@mantine/core'; - -export function AppShelfItemWrapper(props: any) { - const { children, hovering } = props; - const theme = useMantineTheme(); - return ( - - {children} - - ); -} diff --git a/src/components/AppShelf/index.ts b/src/components/AppShelf/index.ts new file mode 100644 index 000000000..fd496bd5b --- /dev/null +++ b/src/components/AppShelf/index.ts @@ -0,0 +1,2 @@ +export { default as AppShelf } from './AppShelf'; +export * from './AppShelfItem'; From 5db28b1607e2058f7c9f22f3b5948a392cdc5ce9 Mon Sep 17 00:00:00 2001 From: ajnart Date: Mon, 23 May 2022 14:23:05 +0200 Subject: [PATCH 7/8] :rotating_light: Fix storybook compilation --- src/components/AppShelf/AppShelf.story.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/AppShelf/AppShelf.story.tsx b/src/components/AppShelf/AppShelf.story.tsx index 928510aac..c73a42f19 100644 --- a/src/components/AppShelf/AppShelf.story.tsx +++ b/src/components/AppShelf/AppShelf.story.tsx @@ -1,5 +1,6 @@ import { SimpleGrid } from '@mantine/core'; -import AppShelf, { AppShelfItem } from './AppShelf'; +import AppShelf from './AppShelf'; +import { AppShelfItem } from './AppShelfItem'; export default { title: 'Item Shelf', From 10e9dc06dd383c2e309d3bfd8e8c7b57866e6610 Mon Sep 17 00:00:00 2001 From: ajnart Date: Mon, 23 May 2022 16:52:43 +0200 Subject: [PATCH 8/8] :coffin: Remove dead code --- src/pages/data.json | 34 ---------------------------------- 1 file changed, 34 deletions(-) delete mode 100644 src/pages/data.json diff --git a/src/pages/data.json b/src/pages/data.json deleted file mode 100644 index 6b3f581fe..000000000 --- a/src/pages/data.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "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" - } - ] -} \ No newline at end of file