✨ Migrate integrations to widgets

src/widgets/weather/WeatherTile.tsx

@@ -1,22 +1,37 @@
 import { Center, Group, Skeleton, Stack, Text, Title } from '@mantine/core';
-import { IconArrowDownRight, IconArrowUpRight } from '@tabler/icons';
+import { IconArrowDownRight, IconArrowUpRight, IconCloudRain } from '@tabler/icons';
 import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
-import { WidgetsMenu } from '../../components/Dashboard/Tiles/Widgets/WidgetsMenu';
 import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
-import { WeatherIntegrationType } from '../../types/integration';
+import { WidgetsMenu } from '../../components/Dashboard/Tiles/Widgets/WidgetsMenu';
+import { defineWidget } from '../helper';
+import { IWidget } from '../widgets';
 import { useWeatherForCity } from './useWeatherForCity';
 import { WeatherIcon } from './WeatherIcon';
 
+const definition = defineWidget({
+  id: 'weather',
+  icon: IconCloudRain,
+  options: {
+    displayInFahrenheit: {
+      type: 'switch',
+      defaultValue: false,
+    },
+    location: {
+      type: 'text',
+      defaultValue: 'Paris',
+    },
+  },
+  component: WeatherTile,
+});
+
+export type IWeatherWidget = IWidget<typeof definition['id'], typeof definition>;
+
 interface WeatherTileProps extends BaseTileProps {
-  module: WeatherIntegrationType; // TODO: change to new type defined through widgetDefinition
+  module: IWeatherWidget;
 }
 
-export const WeatherTile = ({ className, module }: WeatherTileProps) => {
-  const {
-    data: weather,
-    isLoading,
-    isError,
-  } = useWeatherForCity(module?.properties.location ?? 'Paris');
+function WeatherTile({ className, module }: WeatherTileProps) {
+  const { data: weather, isLoading, isError } = useWeatherForCity(module.properties.location);
 
   if (isLoading) {
     return (
@@ -49,7 +64,7 @@ export const WeatherTile = ({ className, module }: WeatherTileProps) => {
       <WidgetsMenu
         integration="weather"
         module={module}
-        options={module?.properties}
+        options={module.properties}
         labels={{
           isFahrenheit: 'descriptor.settings.displayInFahrenheit.label',
           location: 'descriptor.settings.location.label',
@@ -62,7 +77,7 @@ export const WeatherTile = ({ className, module }: WeatherTileProps) => {
             <Title order={2}>
               {getPerferedUnit(
                 weather!.current_weather.temperature,
-                module?.properties.isFahrenheit
+                module.properties.displayInFahrenheit
               )}
             </Title>
             <Group spacing="xs" noWrap>
@@ -70,7 +85,7 @@ export const WeatherTile = ({ className, module }: WeatherTileProps) => {
                 <span>
                   {getPerferedUnit(
                     weather!.daily.temperature_2m_max[0],
-                    module?.properties.isFahrenheit
+                    module.properties.displayInFahrenheit
                   )}
                 </span>
                 <IconArrowUpRight size={16} style={{ right: 15 }} />
@@ -79,7 +94,7 @@ export const WeatherTile = ({ className, module }: WeatherTileProps) => {
                 <span>
                   {getPerferedUnit(
                     weather!.daily.temperature_2m_min[0],
-                    module?.properties.isFahrenheit
+                    module.properties.displayInFahrenheit
                   )}
                 </span>
                 <IconArrowDownRight size={16} />
@@ -90,7 +105,9 @@ export const WeatherTile = ({ className, module }: WeatherTileProps) => {
       </Center>
     </HomarrCardWrapper>
   );
-};
+}
 
 const getPerferedUnit = (value: number, isFahrenheit = false): string =>
   isFahrenheit ? `${(value * (9 / 5) + 32).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
+
+export default definition;