Add search spotlight with registration hook (#82)

* wip: add spotlight

* feat: add spotlight with registration hook and group chips

* chore: address pull request feedback

* docs: add documentation for usage of spotlight actions

* fix: deepsource issue JS-0415

* feat: add support for dependencies of spotlight actions

* fix: lockfile broken

* feat: add hover effect for spotlight action

* docs: Add documentation about dependency array

* refactor: remove test spotlight actions, disallow all as group for actions

* fix: type issues

* chore: address pull request feedback

apps/nextjs/src/components/board/sections/content.tsx

@@ -34,26 +34,28 @@ interface Props {
 export const SectionContent = ({ items, refs }: Props) => {
   return (
     <>
-      {items.map((item) => (
-        <div
-          key={item.id}
-          className="grid-stack-item"
-          data-id={item.id}
-          gs-x={item.xOffset}
-          gs-y={item.yOffset}
-          gs-w={item.width}
-          gs-h={item.height}
-          gs-min-w={1}
-          gs-min-h={1}
-          gs-max-w={4}
-          gs-max-h={4}
-          ref={refs.items.current[item.id] as RefObject<HTMLDivElement>}
-        >
-          <Card className="grid-stack-item-content" withBorder>
-            <BoardItem item={item} />
-          </Card>
-        </div>
-      ))}
+      {items.map((item) => {
+        return (
+          <div
+            key={item.id}
+            className="grid-stack-item"
+            data-id={item.id}
+            gs-x={item.xOffset}
+            gs-y={item.yOffset}
+            gs-w={item.width}
+            gs-h={item.height}
+            gs-min-w={1}
+            gs-min-h={1}
+            gs-max-w={4}
+            gs-max-h={4}
+            ref={refs.items.current[item.id] as RefObject<HTMLDivElement>}
+          >
+            <Card className="grid-stack-item-content" withBorder>
+              <BoardItem item={item} />
+            </Card>
+          </div>
+        );
+      })}
     </>
   );
 };

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

@@ -107,7 +107,7 @@ export const useGridstack = ({
 
     // Add listener for moving items in config from one wrapper to another
     currentGrid?.on("added", (_, nodes) => {
-      nodes.forEach((node) => onAdd(node));
+      nodes.forEach(onAdd);
     });
 
     return () => {
@@ -192,8 +192,6 @@ const useCssVariableConfiguration = ({
     const widgetWidth = mainRef.current.clientWidth / sectionColumnCount;
     // widget width is used to define sizes of gridstack items within global.scss
     root?.style.setProperty("--gridstack-widget-width", widgetWidth.toString());
-    console.log("widgetWidth", widgetWidth);
-    console.log(gridRef.current);
     gridRef.current?.cellHeight(widgetWidth);
     // gridRef.current is required otherwise the cellheight is run on production as undefined
     // eslint-disable-next-line react-hooks/exhaustive-deps