chore: update prettier configuration for print width (#519)

* feat: update prettier configuration for print width * chore: apply code formatting to entire repository * fix: remove build files * fix: format issue --------- Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
2024-05-19 22:38:39 +02:00
parent 919161798e
commit f1b1ec59ec
234 changed files with 2444 additions and 5375 deletions
--- a/packages/widgets/src/weather/component.tsx
+++ b/packages/widgets/src/weather/component.tsx
@@ -1,9 +1,5 @@
 import { Card, Flex, Group, Stack, Text, Title } from "@mantine/core";
-import {
-  IconArrowDownRight,
-  IconArrowUpRight,
-  IconMapPin,
-} from "@tabler/icons-react";
+import { IconArrowDownRight, IconArrowUpRight, IconMapPin } from "@tabler/icons-react";

 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -11,10 +7,7 @@ import { clientApi } from "@homarr/api/client";
 import type { WidgetComponentProps } from "../definition";
 import { WeatherIcon } from "./icon";

-export default function WeatherWidget({
-  options,
-  width,
-}: WidgetComponentProps<"weather">) {
+export default function WeatherWidget({ options, width }: WidgetComponentProps<"weather">) {
  const [weather] = clientApi.widget.weather.atLocation.useSuspenseQuery(
    {
      latitude: options.location.latitude,
@@ -29,34 +22,18 @@ export default function WeatherWidget({

  return (
    <Stack w="100%" h="100%" justify="space-around" gap={0} align="center">
-      <WeeklyForecast
-        weather={weather}
-        width={width}
-        options={options}
-        shouldHide={!options.hasForecast}
-      />
-      <DailyWeather
-        weather={weather}
-        width={width}
-        options={options}
-        shouldHide={options.hasForecast}
-      />
+      <WeeklyForecast weather={weather} width={width} options={options} shouldHide={!options.hasForecast} />
+      <DailyWeather weather={weather} width={width} options={options} shouldHide={options.hasForecast} />
    </Stack>
  );
 }

-interface DailyWeatherProps
-  extends Pick<WidgetComponentProps<"weather">, "width" | "options"> {
+interface DailyWeatherProps extends Pick<WidgetComponentProps<"weather">, "width" | "options"> {
  shouldHide: boolean;
  weather: RouterOutputs["widget"]["weather"]["atLocation"];
 }

-const DailyWeather = ({
-  shouldHide,
-  width,
-  options,
-  weather,
-}: DailyWeatherProps) => {
+const DailyWeather = ({ shouldHide, width, options, weather }: DailyWeatherProps) => {
  if (shouldHide) {
    return null;
  }
@@ -69,30 +46,16 @@ const DailyWeather = ({
        justify={"center"}
        direction={width < 200 ? "column" : "row"}
      >
-        <WeatherIcon
-          size={width < 300 ? 30 : 50}
-          code={weather.current_weather.weathercode}
-        />
-        <Title order={2}>
-          {getPreferredUnit(
-            weather.current_weather.temperature,
-            options.isFormatFahrenheit,
-          )}
-        </Title>
+        <WeatherIcon size={width < 300 ? 30 : 50} code={weather.current_weather.weathercode} />
+        <Title order={2}>{getPreferredUnit(weather.current_weather.temperature, options.isFormatFahrenheit)}</Title>
      </Flex>

      {width > 200 && (
        <Group wrap="nowrap" gap="xs">
          <IconArrowUpRight />
-          {getPreferredUnit(
-            weather.daily.temperature_2m_max[0]!,
-            options.isFormatFahrenheit,
-          )}
+          {getPreferredUnit(weather.daily.temperature_2m_max[0]!, options.isFormatFahrenheit)}
          <IconArrowDownRight />
-          {getPreferredUnit(
-            weather.daily.temperature_2m_min[0]!,
-            options.isFormatFahrenheit,
-          )}
+          {getPreferredUnit(weather.daily.temperature_2m_min[0]!, options.isFormatFahrenheit)}
        </Group>
      )}

@@ -106,30 +69,19 @@ const DailyWeather = ({
  );
 };

-interface WeeklyForecastProps
-  extends Pick<WidgetComponentProps<"weather">, "width" | "options"> {
+interface WeeklyForecastProps extends Pick<WidgetComponentProps<"weather">, "width" | "options"> {
  shouldHide: boolean;
  weather: RouterOutputs["widget"]["weather"]["atLocation"];
 }

-const WeeklyForecast = ({
-  shouldHide,
-  width,
-  options,
-  weather,
-}: WeeklyForecastProps) => {
+const WeeklyForecast = ({ shouldHide, width, options, weather }: WeeklyForecastProps) => {
  if (shouldHide) {
    return null;
  }

  return (
    <>
-      <Flex
-        align="center"
-        gap={width < 120 ? "0.25rem" : "xs"}
-        justify="center"
-        direction="row"
-      >
+      <Flex align="center" gap={width < 120 ? "0.25rem" : "xs"} justify="center" direction="row">
        {options.showCity && (
          <Group wrap="nowrap" gap="xs" align="center">
            <IconMapPin color="blue" size={30} />
@@ -138,18 +90,9 @@ const WeeklyForecast = ({
            </Text>
          </Group>
        )}
-        <WeatherIcon
-          size={width < 300 ? 30 : 50}
-          code={weather.current_weather.weathercode}
-        />
-        <Title
-          order={2}
-          c={weather.current_weather.temperature > 20 ? "red" : "blue"}
-        >
-          {getPreferredUnit(
-            weather.current_weather.temperature,
-            options.isFormatFahrenheit,
-          )}
+        <WeatherIcon size={width < 300 ? 30 : 50} code={weather.current_weather.weathercode} />
+        <Title order={2} c={weather.current_weather.temperature > 20 ? "red" : "blue"}>
+          {getPreferredUnit(weather.current_weather.temperature, options.isFormatFahrenheit)}
        </Title>
      </Flex>
      <Forecast weather={weather} options={options} width={width} />
@@ -157,8 +100,7 @@ const WeeklyForecast = ({
  );
 };

-interface ForecastProps
-  extends Pick<WidgetComponentProps<"weather">, "options" | "width"> {
+interface ForecastProps extends Pick<WidgetComponentProps<"weather">, "options" | "width"> {
  weather: RouterOutputs["widget"]["weather"]["atLocation"];
 }

@@ -166,31 +108,19 @@ function Forecast({ weather, options, width }: ForecastProps) {
  return (
    <Flex align="center" direction="row" justify="space-between" w="100%">
      {weather.daily.time
-        .slice(
-          0,
-          Math.min(options.forecastDayCount, width / (width < 300 ? 64 : 92)),
-        )
+        .slice(0, Math.min(options.forecastDayCount, width / (width < 300 ? 64 : 92)))
        .map((time, index) => (
          <Card key={time}>
            <Flex direction="column" align="center">
              <Text fw={700} lh="1.25rem">
                {new Date(time).getDate().toString().padStart(2, "0")}
              </Text>
-              <WeatherIcon
-                size={width < 300 ? 20 : 50}
-                code={weather.daily.weathercode[index]!}
-              />
+              <WeatherIcon size={width < 300 ? 20 : 50} code={weather.daily.weathercode[index]!} />
              <Text fz={width < 300 ? "xs" : "sm"} lh="1rem">
-                {getPreferredUnit(
-                  weather.daily.temperature_2m_max[index]!,
-                  options.isFormatFahrenheit,
-                )}
+                {getPreferredUnit(weather.daily.temperature_2m_max[index]!, options.isFormatFahrenheit)}
              </Text>
              <Text fz={width < 300 ? "xs" : "sm"} lh="1rem" c="grey">
-                {getPreferredUnit(
-                  weather.daily.temperature_2m_min[index]!,
-                  options.isFormatFahrenheit,
-                )}
+                {getPreferredUnit(weather.daily.temperature_2m_min[index]!, options.isFormatFahrenheit)}
              </Text>
            </Flex>
          </Card>
@@ -200,6 +130,4 @@ function Forecast({ weather, options, width }: ForecastProps) {
 }

 const getPreferredUnit = (value: number, isFahrenheit = false): string =>
-  isFahrenheit
-    ? `${(value * (9 / 5) + 32).toFixed(1)}°F`
-    : `${value.toFixed(1)}°C`;
+  isFahrenheit ? `${(value * (9 / 5) + 32).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
--- a/packages/widgets/src/weather/icon.tsx
+++ b/packages/widgets/src/weather/icon.tsx
@@ -28,8 +28,7 @@ export const WeatherIcon = ({ code, size = 50 }: WeatherIconProps) => {
  const t = useScopedI18n("widget.weather");

  const { icon: Icon, name } =
-    weatherDefinitions.find((definition) => definition.codes.includes(code)) ??
-    unknownWeather;
+    weatherDefinitions.find((definition) => definition.codes.includes(code)) ?? unknownWeather;

  return (
    <Tooltip withinPortal withArrow label={t(`kind.${name}`)}>
--- a/packages/widgets/src/weather/index.ts
+++ b/packages/widgets/src/weather/index.ts
@@ -5,36 +5,33 @@ import { z } from "@homarr/validation";
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";

-export const { definition, componentLoader } = createWidgetDefinition(
-  "weather",
-  {
-    icon: IconCloud,
-    options: optionsBuilder.from(
-      (factory) => ({
-        isFormatFahrenheit: factory.switch(),
-        location: factory.location({
-          defaultValue: {
-            name: "Paris",
-            latitude: 48.85341,
-            longitude: 2.3488,
-          },
-        }),
-        showCity: factory.switch(),
-        hasForecast: factory.switch(),
-        forecastDayCount: factory.slider({
-          defaultValue: 5,
-          validate: z.number().min(1).max(7),
-          step: 1,
-          withDescription: true,
-        }),
+export const { definition, componentLoader } = createWidgetDefinition("weather", {
+  icon: IconCloud,
+  options: optionsBuilder.from(
+    (factory) => ({
+      isFormatFahrenheit: factory.switch(),
+      location: factory.location({
+        defaultValue: {
+          name: "Paris",
+          latitude: 48.85341,
+          longitude: 2.3488,
+        },
      }),
-      {
-        forecastDayCount: {
-          shouldHide({ hasForecast }) {
-            return !hasForecast;
-          },
+      showCity: factory.switch(),
+      hasForecast: factory.switch(),
+      forecastDayCount: factory.slider({
+        defaultValue: 5,
+        validate: z.number().min(1).max(7),
+        step: 1,
+        withDescription: true,
+      }),
+    }),
+    {
+      forecastDayCount: {
+        shouldHide({ hasForecast }) {
+          return !hasForecast;
        },
      },
-    ),
-  },
-).withDynamicImport(() => import("./component"));
+    },
+  ),
+}).withDynamicImport(() => import("./component"));