jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Thomas Camlong
2024-05-19 22:38:39 +02:00
committed by GitHub
parent 919161798e
commit f1b1ec59ec
234 changed files with 2444 additions and 5375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
packages/widgets/src/weather/component.tsx
View File

@@ -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`;