@homefile/components-v2 2.15.0 → 2.15.2

package/dist/components/homeAssistant/monitorAlerts/WeatherWidget.js

@@ -14,12 +14,14 @@ const weatherIconMap = {
     snow: LuSnowflake,
 };
 export const WeatherWidget = ({ current, details, forecast, header, }) => {
-    return (_jsxs(Stack, { spacing: "base", p: "4", zIndex: "2", children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx(Text, { fontSize: "sm", fontFamily: "secondary", textTransform: "uppercase", children: header.date }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", textTransform: "uppercase", children: header.location })] }), _jsxs(Stack, { spacing: "0", align: "end", children: [_jsxs(HStack, { align: "start", spacing: "2", children: [_jsxs(Text, { fontSize: "6xl", fontWeight: "medium", lineHeight: 1, color: "gray.4", children: [current.temp, "\u00B0"] }), getWeatherIcon(current.icon, 50)] }), _jsxs(Text, { fontSize: "md", children: [_jsx(chakra.span, { color: "gray.2", children: "H " }), " ", current.high, "\u00B0 \u00A0", _jsx(chakra.span, { color: "gray.2", children: "L " }), current.low, "\u00B0"] })] }), _jsx(Divider, { borderColor: "gray.2", borderStyle: "dashed" }), _jsxs(Flex, { justify: "space-between", children: [_jsxs(VStack, { spacing: "0", align: "start", children: [_jsx(WeatherDetailText, { children: "Precipitation" }), details.humidity && _jsx(WeatherDetailText, { children: "Humidity" }), _jsx(WeatherDetailText, { children: "Wind" })] }), _jsxs(VStack, { spacing: "0", align: "start", children: [_jsxs(WeatherDetailText, { children: [details.precipitation, "%"] }), details.humidity && (_jsxs(WeatherDetailText, { children: [details.humidity, "%"] })), _jsx(WeatherDetailText, { children: details.wind })] })] }), _jsx(Flex, { justify: "space-between", gap: "1", children: forecast.map((f) => (_jsxs(VStack, { spacing: "0", border: "1px solid", borderColor: "gray.2", borderRadius: "sm", children: [_jsx(Text, { fontFamily: "secondary", textTransform: "uppercase", fontSize: "xxs", color: "gray.2", children: f.day }), _jsx(Divider, { borderColor: "gray.2" }), _jsxs(Stack, { spacing: "0", py: "1", px: "2", align: "center", children: [getWeatherIcon(f.icon, 16, colors.gray[3]), _jsxs(Text, { fontSize: "sm", fontWeight: "medium", mb: "-1", children: [f.high, "\u00B0"] }), _jsxs(WeatherDetailText, { children: ["L ", f.low, "\u00B0"] })] })] }, f.day))) })] }));
+    return (_jsxs(Stack, { spacing: "base", p: "4", zIndex: "2", children: [header && (_jsxs(Flex, { justify: "space-between", align: "center", children: [(header === null || header === void 0 ? void 0 : header.date) && (_jsx(Text, { fontSize: "sm", fontFamily: "secondary", textTransform: "uppercase", children: header.date })), (header === null || header === void 0 ? void 0 : header.location) && (_jsx(Text, { fontSize: "sm", fontFamily: "secondary", textTransform: "uppercase", children: header.location }))] })), current && (_jsxs(Stack, { spacing: "0", align: "end", children: [_jsxs(HStack, { align: "start", spacing: "2", children: [(current === null || current === void 0 ? void 0 : current.temp) && (_jsxs(Text, { fontSize: "6xl", fontWeight: "medium", lineHeight: 1, color: "gray.4", children: [current.temp, "\u00B0"] })), getWeatherIcon(current.icon, 50)] }), _jsxs(Text, { fontSize: "md", children: [_jsx(chakra.span, { color: "gray.2", children: "H " }), " ", current === null || current === void 0 ? void 0 : current.high, "\u00B0 \u00A0", _jsx(chakra.span, { color: "gray.2", children: "L " }), current === null || current === void 0 ? void 0 : current.low, "\u00B0"] })] })), _jsx(Divider, { borderColor: "gray.2", borderStyle: "dashed" }), details && (_jsxs(Flex, { justify: "space-between", children: [_jsxs(VStack, { spacing: "0", align: "start", children: [_jsx(WeatherDetailText, { children: "Precipitation" }), (details === null || details === void 0 ? void 0 : details.humidity) && (_jsx(WeatherDetailText, { children: "Humidity" })), _jsx(WeatherDetailText, { children: "Wind" })] }), _jsxs(VStack, { spacing: "0", align: "start", children: [(details === null || details === void 0 ? void 0 : details.precipitation) && (_jsxs(WeatherDetailText, { children: [details.precipitation, "%"] })), (details === null || details === void 0 ? void 0 : details.humidity) && (_jsxs(WeatherDetailText, { children: [details.humidity, "%"] })), (details === null || details === void 0 ? void 0 : details.wind) && (_jsx(WeatherDetailText, { children: details.wind }))] })] })), forecast && (_jsx(Flex, { justify: "space-between", gap: "1", children: forecast === null || forecast === void 0 ? void 0 : forecast.map((f) => (_jsxs(VStack, { spacing: "0", border: "1px solid", borderColor: "gray.2", borderRadius: "sm", children: [_jsx(Text, { fontFamily: "secondary", textTransform: "uppercase", fontSize: "xxs", color: "gray.2", children: f.day }), _jsx(Divider, { borderColor: "gray.2" }), _jsxs(Stack, { spacing: "0", py: "1", px: "2", align: "center", children: [getWeatherIcon(f.icon, 16, colors.gray[3]), _jsxs(Text, { fontSize: "sm", fontWeight: "medium", mb: "-1", children: [f.high, "\u00B0"] }), _jsxs(WeatherDetailText, { children: ["L ", f.low, "\u00B0"] })] })] }, f.day))) }))] }));
 };
 const WeatherDetailText = ({ children }) => {
     return (_jsx(Text, { fontFamily: "secondary", textTransform: "uppercase", fontSize: "xs", lineHeight: "1.2", children: children }));
 };
 const getWeatherIcon = (iconUrl, size = 48, color = colors.gray[4]) => {
+    if (!iconUrl)
+        return null;
     const code = extractCodeFromUrl(iconUrl);
     const IconComponent = weatherIconMap[code] || LuSun;
     return _jsx(IconComponent, { size: size, color: color });

package/dist/utils/Weather.utils.js

@@ -1,9 +1,8 @@
 import { parseISO, format } from 'date-fns';
 export function mapForecastToWidget(periods, location) {
     var _a, _b, _c, _d;
-    if (!periods.length) {
-        throw new Error('Nenhum período disponível para mapping');
-    }
+    if (!periods.length)
+        return {};
     // --- HEADER DATE ---
     const todayDate = parseISO(periods[0].startTime);
     const headerDate = format(todayDate, 'EEEE, MMMM do')
@@ -14,7 +13,6 @@ export function mapForecastToWidget(periods, location) {
     const night0 = (_c = (_b = periods.find((p) => !p.isDaytime &&
         format(parseISO(p.startTime), 'yyyy-MM-dd') ===
             format(parseISO(day0.startTime), 'yyyy-MM-dd'))) !== null && _b !== void 0 ? _b : periods.find((p) => !p.isDaytime)) !== null && _c !== void 0 ? _c : day0;
-    console.log({ night0 });
     const currentTemp = day0.temperature;
     const currentIcon = day0.icon;
     const highTemp = day0.temperature;
@@ -32,7 +30,7 @@ export function mapForecastToWidget(periods, location) {
                 format(parseISO(p.startTime), 'yyyy-MM-dd'));
         const low = (_a = night === null || night === void 0 ? void 0 : night.temperature) !== null && _a !== void 0 ? _a : p.temperature;
         const icon = p.icon;
-        const day = format(parseISO(p.startTime), 'EEE').toUpperCase(); // "TUE"
+        const day = format(parseISO(p.startTime), 'EEE').toUpperCase();
         return { day, icon, high: p.temperature, low };
     });
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.15.0",
+  "version": "2.15.2",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/homeAssistant/monitorAlerts/WeatherWidget.tsx

@@ -44,79 +44,107 @@ export const WeatherWidget = ({
 }: WeatherWidgetI) => {
   return (
     <Stack spacing="base" p="4" zIndex="2">
-      <Flex justify="space-between" align="center">
-        <Text fontSize="sm" fontFamily="secondary" textTransform="uppercase">
-          {header.date}
-        </Text>
-        <Text fontSize="sm" fontFamily="secondary" textTransform="uppercase">
-          {header.location}
-        </Text>
-      </Flex>
-
-      <Stack spacing="0" align="end">
-        <HStack align="start" spacing="2">
-          <Text
-            fontSize="6xl"
-            fontWeight="medium"
-            lineHeight={1}
-            color="gray.4"
-          >
-            {current.temp}°
-          </Text>
-          {getWeatherIcon(current.icon, 50)}
-        </HStack>
-        <Text fontSize="md">
-          <chakra.span color="gray.2">H </chakra.span> {current.high}° &nbsp;
-          <chakra.span color="gray.2">L </chakra.span>
-          {current.low}°
-        </Text>
-      </Stack>
-
-      <Divider borderColor="gray.2" borderStyle="dashed" />
-
-      <Flex justify="space-between">
-        <VStack spacing="0" align="start">
-          <WeatherDetailText>Precipitation</WeatherDetailText>
-          {details.humidity && <WeatherDetailText>Humidity</WeatherDetailText>}
-          <WeatherDetailText>Wind</WeatherDetailText>
-        </VStack>
-        <VStack spacing="0" align="start">
-          <WeatherDetailText>{details.precipitation}%</WeatherDetailText>
-          {details.humidity && (
-            <WeatherDetailText>{details.humidity}%</WeatherDetailText>
+      {header && (
+        <Flex justify="space-between" align="center">
+          {header?.date && (
+            <Text
+              fontSize="sm"
+              fontFamily="secondary"
+              textTransform="uppercase"
+            >
+              {header.date}
+            </Text>
           )}
-          <WeatherDetailText>{details.wind}</WeatherDetailText>
-        </VStack>
-      </Flex>
-
-      <Flex justify="space-between" gap="1">
-        {forecast.map((f) => (
-          <VStack
-            key={f.day}
-            spacing="0"
-            border="1px solid"
-            borderColor="gray.2"
-            borderRadius="sm"
-          >
+          {header?.location && (
             <Text
+              fontSize="sm"
               fontFamily="secondary"
               textTransform="uppercase"
-              fontSize="xxs"
-              color="gray.2"
             >
-              {f.day}
+              {header.location}
             </Text>
-            <Divider borderColor="gray.2" />
-            <Stack spacing="0" py="1" px="2" align="center">
-              {getWeatherIcon(f.icon, 16, colors.gray[3])}
-              <Text fontSize="sm" fontWeight="medium" mb="-1">
-                {f.high}°
+          )}
+        </Flex>
+      )}
+
+      {current && (
+        <Stack spacing="0" align="end">
+          <HStack align="start" spacing="2">
+            {current?.temp && (
+              <Text
+                fontSize="6xl"
+                fontWeight="medium"
+                lineHeight={1}
+                color="gray.4"
+              >
+                {current.temp}°
               </Text>
-              <WeatherDetailText>L {f.low}°</WeatherDetailText>
-            </Stack>
+            )}
+            {getWeatherIcon(current.icon, 50)}
+          </HStack>
+          <Text fontSize="md">
+            <chakra.span color="gray.2">H </chakra.span> {current?.high}° &nbsp;
+            <chakra.span color="gray.2">L </chakra.span>
+            {current?.low}°
+          </Text>
+        </Stack>
+      )}
+
+      <Divider borderColor="gray.2" borderStyle="dashed" />
+
+      {details && (
+        <Flex justify="space-between">
+          <VStack spacing="0" align="start">
+            <WeatherDetailText>Precipitation</WeatherDetailText>
+            {details?.humidity && (
+              <WeatherDetailText>Humidity</WeatherDetailText>
+            )}
+            <WeatherDetailText>Wind</WeatherDetailText>
+          </VStack>
+          <VStack spacing="0" align="start">
+            {details?.precipitation && (
+              <WeatherDetailText>{details.precipitation}%</WeatherDetailText>
+            )}
+            {details?.humidity && (
+              <WeatherDetailText>{details.humidity}%</WeatherDetailText>
+            )}
+            {details?.wind && (
+              <WeatherDetailText>{details.wind}</WeatherDetailText>
+            )}
           </VStack>
-        ))}
-      </Flex>
+        </Flex>
+      )}
+
+      {forecast && (
+        <Flex justify="space-between" gap="1">
+          {forecast?.map((f) => (
+            <VStack
+              key={f.day}
+              spacing="0"
+              border="1px solid"
+              borderColor="gray.2"
+              borderRadius="sm"
+            >
+              <Text
+                fontFamily="secondary"
+                textTransform="uppercase"
+                fontSize="xxs"
+                color="gray.2"
+              >
+                {f.day}
+              </Text>
+              <Divider borderColor="gray.2" />
+              <Stack spacing="0" py="1" px="2" align="center">
+                {getWeatherIcon(f.icon, 16, colors.gray[3])}
+                <Text fontSize="sm" fontWeight="medium" mb="-1">
+                  {f.high}°
+                </Text>
+                <WeatherDetailText>L {f.low}°</WeatherDetailText>
+              </Stack>
+            </VStack>
+          ))}
+        </Flex>
+      )}
     </Stack>
   )
 }
@@ -135,6 +163,7 @@ const WeatherDetailText = ({ children }: PropsWithChildren) => {
 }
 
 const getWeatherIcon = (iconUrl: string, size = 48, color = colors.gray[4]) => {
+  if (!iconUrl) return null
   const code = extractCodeFromUrl(iconUrl)
   const IconComponent = weatherIconMap[code] || LuSun
   return <IconComponent size={size} color={color} />

package/src/utils/Weather.utils.ts

@@ -5,9 +5,7 @@ export function mapForecastToWidget(
   periods: ForecastPeriodI[],
   location: string
 ): WeatherWidgetI {
-  if (!periods.length) {
-    throw new Error('Nenhum período disponível para mapping')
-  }
+  if (!periods.length) return {} as WeatherWidgetI
 
   // --- HEADER DATE ---
   const todayDate = parseISO(periods[0].startTime)
@@ -27,8 +25,6 @@ export function mapForecastToWidget(
     periods.find((p) => !p.isDaytime) ??
     day0
 
-  console.log({ night0 })
-
   const currentTemp = day0.temperature
   const currentIcon = day0.icon
   const highTemp = day0.temperature
@@ -52,7 +48,7 @@ export function mapForecastToWidget(
     )
     const low = night?.temperature ?? p.temperature
     const icon = p.icon
-    const day = format(parseISO(p.startTime), 'EEE').toUpperCase() // "TUE"
+    const day = format(parseISO(p.startTime), 'EEE').toUpperCase()
     return { day, icon, high: p.temperature, low }
   })