From 2943819f74941790125d505a3509b107eaf9e5a9 Mon Sep 17 00:00:00 2001 From: Meier Lukas Date: Sat, 3 Feb 2024 22:59:34 +0100 Subject: [PATCH] chore: update gridstack to homarr/gridstack package (#20) * chore: migrate gridstack to homarr gridstack * fix: formatting issue --- apps/nextjs/package.json | 2 +- .../board/sections/gridstack/init-gridstack.ts | 7 ++++--- .../board/sections/gridstack/use-gridstack.ts | 10 +++++----- apps/nextjs/src/styles/gridstack.scss | 2 +- pnpm-lock.yaml | 14 +++++++------- 5 files changed, 18 insertions(+), 17 deletions(-) diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json index 51ad71e40..60fb969f7 100644 --- a/apps/nextjs/package.json +++ b/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", diff --git a/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts b/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts index a8d154356..78cc0deb5 100644 --- a/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts +++ b/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}']`, diff --git a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts b/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts index 1227a9c94..6dcad138d 100644 --- a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts +++ b/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"; -import { useAtomValue } from "jotai"; +} from "@homarr/gridstack"; 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) => { - const nodes = el as GridStackNode[]; + currentGrid?.on("added", (_, nodes) => { nodes.forEach((node) => onAdd(node)); }); diff --git a/apps/nextjs/src/styles/gridstack.scss b/apps/nextjs/src/styles/gridstack.scss index 4a6d18504..ae572061a 100644 --- a/apps/nextjs/src/styles/gridstack.scss +++ b/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; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1879178c5..f3bb6bf46 100644 --- a/pnpm-lock.yaml +++ b/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'}