@homefile/components-v2 2.15.1 → 2.15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components/homeAssistant/monitorAlerts/WeatherWidget.js +3 -1
  2. package/package.json +1 -1
  3. package/src/components/homeAssistant/monitorAlerts/WeatherWidget.tsx +94 -65
package/dist/components/homeAssistant/monitorAlerts/WeatherWidget.js CHANGED
@@ -14,12 +14,14 @@ const weatherIconMap = {
14
14
  snow: LuSnowflake,
15
15
  };
16
16
  export const WeatherWidget = ({ current, details, forecast, header, }) => {
17
- 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))) })] }));
17
+ 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))) }))] }));
18
18
  };
19
19
  const WeatherDetailText = ({ children }) => {
20
20
  return (_jsx(Text, { fontFamily: "secondary", textTransform: "uppercase", fontSize: "xs", lineHeight: "1.2", children: children }));
21
21
  };
22
22
  const getWeatherIcon = (iconUrl, size = 48, color = colors.gray[4]) => {
23
+ if (!iconUrl)
24
+ return null;
23
25
  const code = extractCodeFromUrl(iconUrl);
24
26
  const IconComponent = weatherIconMap[code] || LuSun;
25
27
  return _jsx(IconComponent, { size: size, color: color });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.15.1",
3
+ "version": "2.15.2",
4
4
  "author": "Homefile",
5
5
  "license": "UNLICENSED",
6
6
  "typings": "dist/index.d.ts",
package/src/components/homeAssistant/monitorAlerts/WeatherWidget.tsx CHANGED
@@ -44,79 +44,107 @@ export const WeatherWidget = ({
44
44
  }: WeatherWidgetI) => {
45
45
  return (
46
46
  <Stack spacing="base" p="4" zIndex="2">
47
- <Flex justify="space-between" align="center">
48
- <Text fontSize="sm" fontFamily="secondary" textTransform="uppercase">
49
- {header.date}
50
- </Text>
51
- <Text fontSize="sm" fontFamily="secondary" textTransform="uppercase">
52
- {header.location}
53
- </Text>
54
- </Flex>
55
-
56
- <Stack spacing="0" align="end">
57
- <HStack align="start" spacing="2">
58
- <Text
59
- fontSize="6xl"
60
- fontWeight="medium"
61
- lineHeight={1}
62
- color="gray.4"
63
- >
64
- {current.temp}°
65
- </Text>
66
- {getWeatherIcon(current.icon, 50)}
67
- </HStack>
68
- <Text fontSize="md">
69
- <chakra.span color="gray.2">H </chakra.span> {current.high}° &nbsp;
70
- <chakra.span color="gray.2">L </chakra.span>
71
- {current.low}°
72
- </Text>
73
- </Stack>
74
-
75
- <Divider borderColor="gray.2" borderStyle="dashed" />
76
-
77
- <Flex justify="space-between">
78
- <VStack spacing="0" align="start">
79
- <WeatherDetailText>Precipitation</WeatherDetailText>
80
- {details.humidity && <WeatherDetailText>Humidity</WeatherDetailText>}
81
- <WeatherDetailText>Wind</WeatherDetailText>
82
- </VStack>
83
- <VStack spacing="0" align="start">
84
- <WeatherDetailText>{details.precipitation}%</WeatherDetailText>
85
- {details.humidity && (
86
- <WeatherDetailText>{details.humidity}%</WeatherDetailText>
47
+ {header && (
48
+ <Flex justify="space-between" align="center">
49
+ {header?.date && (
50
+ <Text
51
+ fontSize="sm"
52
+ fontFamily="secondary"
53
+ textTransform="uppercase"
54
+ >
55
+ {header.date}
56
+ </Text>
87
57
  )}
88
- <WeatherDetailText>{details.wind}</WeatherDetailText>
89
- </VStack>
90
- </Flex>
91
-
92
- <Flex justify="space-between" gap="1">
93
- {forecast.map((f) => (
94
- <VStack
95
- key={f.day}
96
- spacing="0"
97
- border="1px solid"
98
- borderColor="gray.2"
99
- borderRadius="sm"
100
- >
58
+ {header?.location && (
101
59
  <Text
60
+ fontSize="sm"
102
61
  fontFamily="secondary"
103
62
  textTransform="uppercase"
104
- fontSize="xxs"
105
- color="gray.2"
106
63
  >
107
- {f.day}
64
+ {header.location}
108
65
  </Text>
109
- <Divider borderColor="gray.2" />
110
- <Stack spacing="0" py="1" px="2" align="center">
111
- {getWeatherIcon(f.icon, 16, colors.gray[3])}
112
- <Text fontSize="sm" fontWeight="medium" mb="-1">
113
- {f.high}°
66
+ )}
67
+ </Flex>
68
+ )}
69
+
70
+ {current && (
71
+ <Stack spacing="0" align="end">
72
+ <HStack align="start" spacing="2">
73
+ {current?.temp && (
74
+ <Text
75
+ fontSize="6xl"
76
+ fontWeight="medium"
77
+ lineHeight={1}
78
+ color="gray.4"
79
+ >
80
+ {current.temp}°
114
81
  </Text>
115
- <WeatherDetailText>L {f.low}°</WeatherDetailText>
116
- </Stack>
82
+ )}
83
+ {getWeatherIcon(current.icon, 50)}
84
+ </HStack>
85
+ <Text fontSize="md">
86
+ <chakra.span color="gray.2">H </chakra.span> {current?.high}° &nbsp;
87
+ <chakra.span color="gray.2">L </chakra.span>
88
+ {current?.low}°
89
+ </Text>
90
+ </Stack>
91
+ )}
92
+
93
+ <Divider borderColor="gray.2" borderStyle="dashed" />
94
+
95
+ {details && (
96
+ <Flex justify="space-between">
97
+ <VStack spacing="0" align="start">
98
+ <WeatherDetailText>Precipitation</WeatherDetailText>
99
+ {details?.humidity && (
100
+ <WeatherDetailText>Humidity</WeatherDetailText>
101
+ )}
102
+ <WeatherDetailText>Wind</WeatherDetailText>
103
+ </VStack>
104
+ <VStack spacing="0" align="start">
105
+ {details?.precipitation && (
106
+ <WeatherDetailText>{details.precipitation}%</WeatherDetailText>
107
+ )}
108
+ {details?.humidity && (
109
+ <WeatherDetailText>{details.humidity}%</WeatherDetailText>
110
+ )}
111
+ {details?.wind && (
112
+ <WeatherDetailText>{details.wind}</WeatherDetailText>
113
+ )}
117
114
  </VStack>
118
- ))}
119
- </Flex>
115
+ </Flex>
116
+ )}
117
+
118
+ {forecast && (
119
+ <Flex justify="space-between" gap="1">
120
+ {forecast?.map((f) => (
121
+ <VStack
122
+ key={f.day}
123
+ spacing="0"
124
+ border="1px solid"
125
+ borderColor="gray.2"
126
+ borderRadius="sm"
127
+ >
128
+ <Text
129
+ fontFamily="secondary"
130
+ textTransform="uppercase"
131
+ fontSize="xxs"
132
+ color="gray.2"
133
+ >
134
+ {f.day}
135
+ </Text>
136
+ <Divider borderColor="gray.2" />
137
+ <Stack spacing="0" py="1" px="2" align="center">
138
+ {getWeatherIcon(f.icon, 16, colors.gray[3])}
139
+ <Text fontSize="sm" fontWeight="medium" mb="-1">
140
+ {f.high}°
141
+ </Text>
142
+ <WeatherDetailText>L {f.low}°</WeatherDetailText>
143
+ </Stack>
144
+ </VStack>
145
+ ))}
146
+ </Flex>
147
+ )}
120
148
  </Stack>
121
149
  )
122
150
  }
@@ -135,6 +163,7 @@ const WeatherDetailText = ({ children }: PropsWithChildren) => {
135
163
  }
136
164
 
137
165
  const getWeatherIcon = (iconUrl: string, size = 48, color = colors.gray[4]) => {
166
+ if (!iconUrl) return null
138
167
  const code = extractCodeFromUrl(iconUrl)
139
168
  const IconComponent = weatherIconMap[code] || LuSun
140
169
  return <IconComponent size={size} color={color} />