✨ Removed widgets from tile definitions

src/components/Dashboard/Wrappers/Category/Category.tsx

@@ -1,7 +1,9 @@
 import { Card, Group, Title } from '@mantine/core';
 import { CategoryType } from '../../../../types/category';
+import { IWidgetDefinition } from '../../../../widgets/widgets';
 import { HomarrCardWrapper } from '../../Tiles/HomarrCardWrapper';
 import { Tiles } from '../../Tiles/tilesDefinitions';
+import Widgets from '../../../../widgets';
 import { GridstackTileWrapper } from '../../Tiles/TileWrapper';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { useGridstack } from '../gridstack/use-gridstack';
@@ -44,19 +46,20 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
           );
         })}
         {Object.entries(integrations).map(([k, v]) => {
-          const { component: TileComponent, ...tile } = Tiles[k as keyof typeof Tiles];
+          const widget = Widgets[k as keyof typeof Widgets] as IWidgetDefinition | undefined;
+          if (!widget) return null;
 
           return (
             <GridstackTileWrapper
-              id={k}
               type="module"
               key={k}
               itemRef={refs.items.current[k]}
-              {...tile}
+              id={widget.id}
+              {...widget.gridstack}
               {...v.shape.location}
               {...v.shape.size}
             >
-              <TileComponent className="grid-stack-item-content" module={v} />
+              <widget.component className="grid-stack-item-content" module={v} />
             </GridstackTileWrapper>
           );
         })}

src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx

@@ -1,6 +1,8 @@
 import { Card } from '@mantine/core';
 import { RefObject } from 'react';
+import { IWidgetDefinition } from '../../../../widgets/widgets';
 import { Tiles } from '../../Tiles/tilesDefinitions';
+import Widgets from '../../../../widgets';
 import { GridstackTileWrapper } from '../../Tiles/TileWrapper';
 import { useGridstack } from '../gridstack/use-gridstack';
 
@@ -46,19 +48,20 @@ export const DashboardSidebar = ({ location }: DashboardSidebarProps) => {
           );
         })}
         {Object.entries(integrations).map(([k, v]) => {
-          const { component: TileComponent, ...tile } = Tiles[k as keyof typeof Tiles];
+          const widget = Widgets[k as keyof typeof Widgets] as IWidgetDefinition | undefined;
+          if (!widget) return null;
 
           return (
             <GridstackTileWrapper
-              id={k}
               type="module"
               key={k}
               itemRef={refs.items.current[k]}
-              {...tile}
+              id={widget.id}
+              {...widget.gridstack}
               {...v.shape.location}
               {...v.shape.size}
             >
-              <TileComponent className="grid-stack-item-content" module={v} />
+              <widget.component className="grid-stack-item-content" module={v} />
             </GridstackTileWrapper>
           );
         })}

src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx

@@ -1,4 +1,6 @@
 import { WrapperType } from '../../../../types/wrapper';
+import Widgets from '../../../../widgets';
+import { IWidget, IWidgetDefinition } from '../../../../widgets/widgets';
 import { Tiles } from '../../Tiles/tilesDefinitions';
 import { GridstackTileWrapper } from '../../Tiles/TileWrapper';
 import { useGridstack } from '../gridstack/use-gridstack';
@@ -34,19 +36,20 @@ export const DashboardWrapper = ({ wrapper }: DashboardWrapperProps) => {
         );
       })}
       {Object.entries(integrations).map(([k, v]) => {
-        const { component: TileComponent, ...tile } = Tiles[k as keyof typeof Tiles];
+        const widget = Widgets[k as keyof typeof Widgets] as IWidgetDefinition | undefined;
+        if (!widget) return null;
 
         return (
           <GridstackTileWrapper
-            id={k}
             type="module"
             key={k}
             itemRef={refs.items.current[k]}
-            {...tile}
+            id={widget.id}
+            {...widget.gridstack}
             {...v.shape.location}
             {...v.shape.size}
           >
-            <TileComponent className="grid-stack-item-content" module={v} />
+            <widget.component className="grid-stack-item-content" module={v} />
           </GridstackTileWrapper>
         );
       })}

src/widgets/bitTorrent/BitTorrentTile.tsx

@@ -0,0 +1,30 @@
+import { IconClock } from '@tabler/icons';
+import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
+import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
+import { defineWidget } from '../helper';
+import { IWidget } from '../widgets';
+
+const definition = defineWidget({
+  id: 'bitTorrent',
+  icon: IconClock,
+  options: {},
+  gridstack: {
+    minWidth: 2,
+    minHeight: 2,
+    maxWidth: 2,
+    maxHeight: 2,
+  },
+  component: BitTorrentTile,
+});
+
+export type IBitTorrent = IWidget<typeof definition['id'], typeof definition>;
+
+interface BitTorrentTileProps extends BaseTileProps {
+  module: IBitTorrent; // TODO: change to new type defined through widgetDefinition
+}
+
+function BitTorrentTile({ className, module }: BitTorrentTileProps) {
+  return <HomarrCardWrapper>Bit Torrent</HomarrCardWrapper>;
+}
+
+export default definition;

src/widgets/calendar/CalendarTile.tsx

@@ -22,6 +22,12 @@ const definition = defineWidget({
       defaultValue: false,
     },
   },
+  gridstack: {
+    minWidth: 4,
+    minHeight: 5,
+    maxWidth: 12,
+    maxHeight: 12,
+  },
   component: CalendarTile,
 });
 

src/widgets/clock/ClockTile.tsx

@@ -18,6 +18,13 @@ const definition = defineWidget({
       defaultValue: false,
     },
   },
+
+  gridstack: {
+    minWidth: 4,
+    minHeight: 2,
+    maxWidth: 12,
+    maxHeight: 12,
+  },
   component: ClockTile,
 });
 

src/widgets/dashDot/DashDotTile.tsx

@@ -38,6 +38,12 @@ const definition = defineWidget({
       defaultValue: '',
     },
   },
+  gridstack: {
+    minWidth: 4,
+    minHeight: 5,
+    maxWidth: 12,
+    maxHeight: 14,
+  },
   component: DashDotTile,
 });
 

src/widgets/index.ts

@@ -1,4 +1,8 @@
 import calendar from './calendar/CalendarTile';
-
-export default { calendar };
-// TODO: add exports of new IWidgetDefinitions to here
+import dashDot from './dashDot/DashDotTile';
+import useNet from './useNet/UseNetTile';
+import clock from './clock/ClockTile';
+import weather from './weather/WeatherTile';
+import bitTorrent from './bitTorrent/BitTorrentTile';
+import torrentNetworkTraffic from './torrentNetworkTraffic/TorrentNetworkTrafficTile';
+export default { calendar, dashDot, useNet, clock, weather, bitTorrent, torrentNetworkTraffic };

src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx

@@ -0,0 +1,31 @@
+import { IconClock } from '@tabler/icons';
+import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
+import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
+import { defineWidget } from '../helper';
+import { IWidget } from '../widgets';
+
+const definition = defineWidget({
+  id: 'torrentNetworkTraffic',
+  icon: IconClock,
+  options: {},
+
+  gridstack: {
+    minWidth: 2,
+    minHeight: 2,
+    maxWidth: 2,
+    maxHeight: 2,
+  },
+  component: TorrentNetworkTrafficTile,
+});
+
+export type ITorrentNetworkTraffic = IWidget<typeof definition['id'], typeof definition>;
+
+interface TorrentNetworkTrafficTileProps extends BaseTileProps {
+  module: ITorrentNetworkTraffic; // TODO: change to new type defined through widgetDefinition
+}
+
+function TorrentNetworkTrafficTile({ className, module }: TorrentNetworkTrafficTileProps) {
+  return <HomarrCardWrapper>TorrentNetworkTraffic</HomarrCardWrapper>;
+}
+
+export default definition;

src/widgets/useNet/UseNetTile.tsx

@@ -36,6 +36,12 @@ const definition = defineWidget({
   icon: IconFileDownload,
   options: {},
   component: UseNetTile,
+  gridstack: {
+    minWidth: 4,
+    minHeight: 5,
+    maxWidth: 12,
+    maxHeight: 12,
+  },
 });
 
 export type IWeatherWidget = IWidget<typeof definition['id'], typeof definition>;

src/widgets/weather/WeatherTile.tsx

@@ -21,6 +21,12 @@ const definition = defineWidget({
       defaultValue: 'Paris',
     },
   },
+  gridstack: {
+    minWidth: 4,
+    minHeight: 2,
+    maxWidth: 12,
+    maxHeight: 12,
+  },
   component: WeatherTile,
 });
 

src/widgets/widgets.d.ts

@@ -66,5 +66,11 @@ export type IWidgetDefinition<TKey extends string = string> = {
   options: {
     [key: string]: IWidgetOptionValue;
   };
+  gridstack: {
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+  };
   component: React.ComponentType<any>;
 };