chore: update gridstack to homarr/gridstack package (#20)

* chore: migrate gridstack to homarr gridstack

* fix: formatting issue

apps/nextjs/package.json

@@ -40,7 +40,7 @@
     "@trpc/react-query": "next",
     "@trpc/server": "next",
     "dayjs": "^1.11.10",
-    "fily-publish-gridstack": "^0.0.13",
+    "@homarr/gridstack": "^1.0.0",
     "jotai": "^2.6.1",
     "mantine-modal-manager": "^7.5.1",
     "next": "^14.0.4",

apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts

@@ -1,6 +1,7 @@
 import type { MutableRefObject, RefObject } from "react";
-import type { GridItemHTMLElement } from "fily-publish-gridstack";
+
-import { GridStack } from "fily-publish-gridstack";
+import type { GridItemHTMLElement } from "@homarr/gridstack";
+import { GridStack } from "@homarr/gridstack";
 
 import type { Section } from "~/app/[locale]/boards/_types";
 
@@ -36,11 +37,11 @@ export const initializeGridstack = ({
       float: true,
       alwaysShowResizeHandle: true,
       acceptWidgets: true,
-      disableOneColumnMode: true,
       staticGrid: true,
       minRow,
       animate: false,
       styleInHead: true,
+      disableRemoveNodeOnDrop: true,
     },
     // selector of the gridstack item (it's eather category or wrapper)
     `.grid-stack-${section.kind}[data-section-id='${section.id}']`,

apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts

@@ -1,11 +1,12 @@
 import type { MutableRefObject, RefObject } from "react";
 import { createRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { useAtomValue } from "jotai";
+
 import type {
   GridItemHTMLElement,
   GridStack,
   GridStackNode,
-} from "fily-publish-gridstack";
+} from "@homarr/gridstack";
-import { useAtomValue } from "jotai";
 
 import {
   useMarkSectionAsReady,
@@ -101,12 +102,11 @@ export const useGridstack = ({
     const currentGrid = gridRef.current;
     // Add listener for moving items around in a wrapper
     currentGrid?.on("change", (_, nodes) => {
-      (nodes as GridStackNode[]).forEach(onChange);
+      nodes.forEach(onChange);
     });
 
     // Add listener for moving items in config from one wrapper to another
-    currentGrid?.on("added", (_, el) => {
+    currentGrid?.on("added", (_, nodes) => {
-      const nodes = el as GridStackNode[];
       nodes.forEach((node) => onAdd(node));
     });
 

apps/nextjs/src/styles/gridstack.scss

@@ -1,4 +1,4 @@
-@import "fily-publish-gridstack/dist/gridstack.min.css";
+@import "@homarr/gridstack/dist/gridstack.min.css";
 
 :root {
   --gridstack-widget-width: 64;

pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       '@homarr/form':
         specifier: workspace:^0.1.0
         version: link:../../packages/form
+      '@homarr/gridstack':
+        specifier: ^1.0.0
+        version: 1.0.0
       '@homarr/notifications':
         specifier: workspace:^0.1.0
         version: link:../../packages/notifications
@@ -110,9 +113,6 @@ importers:
       dayjs:
         specifier: ^1.11.10
         version: 1.11.10
-      fily-publish-gridstack:
-        specifier: ^0.0.13
-        version: 0.0.13
       jotai:
         specifier: ^2.6.1
         version: 2.6.2(@types/react@18.2.52)(react@18.2.0)
@@ -1357,6 +1357,10 @@ packages:
     resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
     dev: false
 
+  /@homarr/gridstack@1.0.0:
+    resolution: {integrity: sha512-KM9024BipLD9BmtM6jHI8OKLZ1Iy4vZdTfU53ww4qEda/330XQYhIC2SBcQgkNnDB2MTkn/laNSO5gTy+lJg9Q==}
+    dev: false
+
   /@humanwhocodes/config-array@0.11.13:
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}
@@ -4044,10 +4048,6 @@ packages:
     dependencies:
       to-regex-range: 5.0.1
 
-  /fily-publish-gridstack@0.0.13:
-    resolution: {integrity: sha512-evN26y9qwzZcz63PJNCe1zqtf5yLG8UI/2FIBXrW1tcKCyyNIyC8+xkH0QoRalSpJETgAiqdBHgi3asVTU3umQ==}
-    dev: false
-
   /find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}