ublo-lib 1.20.17 → 1.21.0

package/es/lbm/lumiplan/weather/weather-data.d.ts

@@ -0,0 +1,9 @@
+import type { WeatherInfo } from "../types";
+type Props = {
+    kind: "am" | "pm";
+    data: WeatherInfo;
+    expanded: boolean;
+};
+export default function WeatherData({ kind, data, expanded }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=weather-data.d.ts.map

package/es/lbm/lumiplan/weather/weather-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"weather-data.d.ts","sourceRoot":"","sources":["../../../../src/lbm/lumiplan/weather/weather-data.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,KAAK,2CA2GlE"}

package/es/lbm/lumiplan/weather/weather-data.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import T from "../i18n/translations";
+import WeatherIcon from "./weather-icon";
+import css from "./weather-data.module.css";
+export default function WeatherData({ kind, data, expanded }) {
+    const { skyStatus, temperature, windchill, indexUv, limitIsothermic0, limitIsothermicMinus10, limitRainSnowFall, visibility, wind, } = data;
+    return (_jsxs("div", { className: css.weatherData, children: [_jsx(WeatherIcon, { sky: skyStatus }), _jsxs("div", { className: css.weatherInfo, children: [_jsx("div", { className: css.weatherInfoTitle, children: _jsx(T, { id: `weather.${kind}` }) }), _jsxs("div", { className: css.weatherInfoTemperatures, children: [_jsxs("span", { children: [temperature.value, _jsx(T, { id: temperature.unit })] }), "|", _jsxs("span", { children: [windchill.value, _jsx(T, { id: windchill.unit }), _jsx("em", { children: _jsx(T, { id: "weather.feels-like" }) })] })] }), expanded && (_jsxs("div", { className: css.expanded, children: [skyStatus && (_jsxs("div", { className: css.data, children: [_jsx(T, { id: "weather.sky-status.title" }), " :", " ", _jsx(T, { id: `weather.sky-status.states.${skyStatus}` })] })), temperature && (_jsxs("div", { className: css.data, children: [_jsx(T, { id: "weather.temperature" }), " : ", temperature.value, _jsx(T, { id: temperature.unit })] })), wind && (_jsxs(_Fragment, { children: [wind.value && (_jsxs("div", { className: css.data, children: [_jsx(T, { id: "weather.wind" }), " : ", wind.value.value, _jsx(T, { id: wind.value.unit })] })), wind.valueMax && (_jsxs("div", { className: css.data, children: [_jsx(T, { id: "weather.wind-max" }), " : ", wind.valueMax.value, _jsx(T, { id: wind.valueMax.unit })] })), wind.direction && (_jsxs("div", { className: css.data, children: [_jsx(T, { id: "weather.wind-direction.title" }), " :", " ", _jsx(T, { id: `weather.wind-direction.states.${wind.direction}` })] }))] })), limitRainSnowFall && (_jsxs("div", { className: css.data, children: [_jsx(T, { id: "weather.limit-rain-snow-fall" }), " :", " ", limitRainSnowFall.value, _jsx(T, { id: limitRainSnowFall.unit })] })), limitIsothermic0 && (_jsxs("div", { className: css.data, children: [_jsx(T, { id: "weather.limit-isothermic-0" }), " : ", limitIsothermic0.value, _jsx(T, { id: limitIsothermic0.unit })] })), limitIsothermicMinus10 && (_jsxs("div", { className: css.data, children: [_jsx(T, { id: "weather.limit-isothermic-minus-10" }), " :", " ", limitIsothermicMinus10.value, _jsx(T, { id: limitIsothermicMinus10.unit })] })), visibility && (_jsxs("div", { className: css.data, children: [_jsx(T, { id: "weather.visibility.title" }), " :", " ", _jsx(T, { id: `weather.visibility.states.${visibility}` })] })), indexUv && (_jsxs("div", { className: css.data, children: [_jsx(T, { id: "weather.index-uv" }), " : ", indexUv.value, _jsx(T, { id: indexUv.unit })] }))] }))] })] }));
+}

package/es/lbm/lumiplan/weather/weather-data.module.css

@@ -0,0 +1,61 @@
+.weatherData {
+  flex: 1 1 100%;
+  display: flex;
+  gap: 34px;
+}
+
+.weatherData > svg {
+  flex: 0 0 55px;
+  width: 55px;
+  height: 55px;
+  margin-top: 10px;
+  fill: hsl(var(--primary));
+}
+
+.weatherInfo {
+  display: flex;
+  flex-direction: column;
+}
+
+.weatherInfoTitle {
+  color: hsl(var(--primary));
+  font-weight: 700;
+}
+
+.weatherInfoTemperatures {
+  display: flex;
+  gap: 6px;
+  margin: 16px 0;
+  font-size: 28px;
+  font-weight: 700;
+  color: hsl(var(--secondary));
+}
+
+.weatherInfoTemperatures > span:last-child {
+  position: relative;
+}
+
+.weatherInfoTemperatures > span:last-child > em {
+  position: absolute;
+  top: calc(100% - 6px);
+  left: 20px;
+  padding: 1px 4px;
+  font-size: 12px;
+  color: hsl(var(--grey-000));
+  text-transform: uppercase;
+  font-style: normal;
+  background: var(--blue-gradient);
+  border-radius: 1px;
+  transform: rotate(-4deg) skewX(-4deg);
+}
+
+.expanded {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.data {
+  color: hsl(var(--primary));
+  font-size: 14px;
+}

package/es/lbm/lumiplan/weather/weather-icon.d.ts

@@ -0,0 +1,23 @@
+type Props = {
+    sky: string;
+};
+export declare const weatherIcons: {
+    UNDEF: any;
+    SUNNY: any;
+    MOSTLY_SUNNY: any;
+    FAIR_WEATHER_PARTLY_CLOUDY: any;
+    MOSTLY_CLOUDY_SOME_SUN: any;
+    CLOUDY: any;
+    CLOUDY_LIGHT_RAIN: any;
+    MOSTLY_CLOUDY_LIGHT_RAIN: any;
+    CLOUDY_MODERATE_HEAVY_RAIN: any;
+    VARIABLE_SKY_LIGHT_SNOWFALL: any;
+    CLOUDY_LIGHT_SNOWFALL: any;
+    CLOUDY_MODERATE_HEAVY_SNOWFALL: any;
+    FOG: any;
+    THUNDERSTORMS: any;
+    VARIABLE_SKY_SCATTERED_THUNDERSTORMS: any;
+};
+export default function WeatherIcon({ sky }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=weather-icon.d.ts.map

package/es/lbm/lumiplan/weather/weather-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"weather-icon.d.ts","sourceRoot":"","sources":["../../../../src/lbm/lumiplan/weather/weather-icon.tsx"],"names":[],"mappings":"AAUA,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;CAgBxB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,2CAGjD"}

package/es/lbm/lumiplan/weather/weather-icon.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CloudIcon from "../icons/cloud";
+import FogIcon from "../icons/fog";
+import RainIcon from "../icons/rain";
+import RainyIcon from "../icons/rainy";
+import SnowIcon from "../icons/snow";
+import StormIcon from "../icons/storm";
+import SunIcon from "../icons/sun";
+import SunnyIcon from "../icons/sunny";
+export const weatherIcons = {
+    UNDEF: SunIcon,
+    SUNNY: SunIcon,
+    MOSTLY_SUNNY: SunnyIcon,
+    FAIR_WEATHER_PARTLY_CLOUDY: SunnyIcon,
+    MOSTLY_CLOUDY_SOME_SUN: CloudIcon,
+    CLOUDY: CloudIcon,
+    CLOUDY_LIGHT_RAIN: RainyIcon,
+    MOSTLY_CLOUDY_LIGHT_RAIN: RainyIcon,
+    CLOUDY_MODERATE_HEAVY_RAIN: RainIcon,
+    VARIABLE_SKY_LIGHT_SNOWFALL: SnowIcon,
+    CLOUDY_LIGHT_SNOWFALL: SnowIcon,
+    CLOUDY_MODERATE_HEAVY_SNOWFALL: SnowIcon,
+    FOG: FogIcon,
+    THUNDERSTORMS: StormIcon,
+    VARIABLE_SKY_SCATTERED_THUNDERSTORMS: StormIcon,
+};
+export default function WeatherIcon({ sky }) {
+    const Icon = weatherIcons[sky] || weatherIcons.UNDEF;
+    return _jsx(Icon, {});
+}

package/es/lbm/lumiplan/weather/weather.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { WeatherForecast } from "../types";
+type Props = {
+    weather?: WeatherForecast | null;
+};
+declare const Weather: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Weather;
+//# sourceMappingURL=weather.d.ts.map

package/es/lbm/lumiplan/weather/weather.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"weather.d.ts","sourceRoot":"","sources":["../../../../src/lbm/lumiplan/weather/weather.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGhD,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,OAAO,8EAsIZ,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/es/lbm/lumiplan/weather/weather.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import classNames from "classnames";
+import { useUbloContext } from "ublo/with-ublo";
+import Button from "dt-design-system/es/button";
+import Tooltip from "dt-design-system/es/tooltip";
+import Loader from "dt-design-system/es/loader";
+import * as Icons from "dt-design-system/es/icons";
+import AvalancheRisk from "./avalanche-risk";
+import SnowData from "./snow-data";
+import WeatherData from "./weather-data";
+import T, { t } from "../i18n/translations";
+import css from "./weather.module.css";
+const Weather = React.forwardRef(({ weather }, ref) => {
+    const { lang } = useUbloContext();
+    const [currentZoneIndex, setCurrentZoneIndex] = React.useState(0);
+    const [currentDayIndex, setCurrentDayIndex] = React.useState(0);
+    const [expanded, setExpanded] = React.useState(false);
+    React.useEffect(() => {
+        setCurrentZoneIndex(0);
+        setCurrentDayIndex(0);
+    }, [weather]);
+    if (weather === undefined) {
+        return (_jsx("div", { ref: ref, className: css.loader, "data-tags": t(lang, "weather.title"), children: _jsx(Loader, { variant: "overlay" }) }));
+    }
+    if (!weather) {
+        return null;
+    }
+    const { weatherZones } = weather.weather;
+    const { snowZones } = weather.snow;
+    const { weatherInfos } = weatherZones[currentZoneIndex] || {};
+    const { am, pm } = weatherInfos[currentDayIndex] || {};
+    const snowData = snowZones[currentZoneIndex] || {};
+    const ExpandIcon = expanded ? Icons.MinusCircle : Icons.PlusCircle;
+    const toggleExpanded = () => {
+        setExpanded(!expanded);
+    };
+    return (_jsxs("div", { ref: ref, className: css.weather, "data-tags": t(lang, "weather.title"), children: [_jsxs("div", { className: css.header, children: [_jsx("div", { className: css.days, children: weatherInfos.map((weatherInfo, i) => {
+                            const { date, am, pm } = weatherInfo;
+                            if (!pm || !am)
+                                return null;
+                            const isSelected = i === currentDayIndex;
+                            const updateCurrentDay = () => {
+                                setCurrentDayIndex(i);
+                            };
+                            const isToday = new Date(date).getDate() === new Date().getDate();
+                            const locale = lang === "fr" ? "fr-FR" : "en-UK";
+                            const day = new Date(date).toLocaleDateString(locale, {
+                                weekday: "long",
+                            });
+                            const formatedDate = new Date(date).toLocaleDateString(locale, {
+                                day: "2-digit",
+                                month: "2-digit",
+                                year: "numeric",
+                            });
+                            const classes = classNames(css.day, {
+                                [css.daySelected]: isSelected,
+                            });
+                            return (_jsxs(Button, { className: classes, onClick: updateCurrentDay, children: [_jsx("b", { children: isToday ? _jsx(T, { id: "weather.today" }) : day }), formatedDate] }, date));
+                        }) }), _jsx("div", { className: css.zones, children: weatherZones.map((zone, i) => {
+                            const { name, altitude } = zone;
+                            const { value, unit } = altitude;
+                            const isSelected = i === currentZoneIndex;
+                            const updateCurrentZone = () => {
+                                setCurrentZoneIndex(i);
+                            };
+                            const classes = classNames(css.zone, {
+                                [css.zoneSelected]: isSelected,
+                            });
+                            return (_jsxs(Button, { className: classes, onClick: updateCurrentZone, children: [_jsx("b", { children: name }), " ", value, _jsx("span", { children: _jsx(T, { id: unit }) })] }, name));
+                        }) })] }), _jsxs("div", { className: css.info, children: [_jsx(AvalancheRisk, { avalancheRisk: snowData.avalancheRisk }), _jsxs("div", { className: css.infoBottom, children: [_jsx(SnowData, { data: snowData, expanded: expanded }), _jsx(WeatherData, { kind: "am", data: am, expanded: expanded }), _jsx(WeatherData, { kind: "pm", data: pm, expanded: expanded })] }), _jsx(Tooltip, { content: t(lang, expanded ? "see-less" : "see-more"), children: _jsx(Button, { className: css.expandButton, variant: "transparent", onClick: toggleExpanded, children: _jsx(ExpandIcon, {}) }) })] })] }));
+});
+Weather.displayName = "Weather";
+export default Weather;

package/es/lbm/lumiplan/weather/weather.module.css

@@ -0,0 +1,118 @@
+.loader {
+  position: relative;
+  width: 100%;
+  max-width: 1200px;
+  height: 300px;
+  margin: 30px auto;
+  border-radius: var(--radius-200);
+  overflow: hidden;
+}
+
+.weather {
+  width: 100%;
+  max-width: 1200px;
+  display: flex;
+  flex-direction: column;
+  margin: 36px auto;
+  padding: 0 10px;
+}
+
+@media (min-width: 1220px) {
+  .weather {
+    padding: 0;
+  }
+}
+
+.header {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 16px;
+  overflow: auto;
+}
+
+@media (min-width: 700px) {
+  .header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.days {
+  display: flex;
+}
+
+.zones {
+  display: flex;
+  gap: 10px;
+}
+
+button.zone {
+  --ds-button-padding: 12px;
+  --ds-button-font-size: 16px;
+  --ds-button-foreground: hsl(var(--primary));
+  --ds-button-font-weight: 400;
+  --ds-button-background: transparent;
+  --ds-button-hover-background: hsla(var(--primary), 10%);
+  --ds-button-shadow: 0 0 0 1px hsl(var(--primary)) inset;
+
+  display: block;
+}
+
+button.zoneSelected {
+  --ds-button-foreground: hsl(var(--grey-000));
+  --ds-button-shadow: 0;
+
+  background: var(--blue-gradient);
+}
+
+button.zone b {
+  text-transform: uppercase;
+}
+
+button.day {
+  --ds-button-padding: 16px;
+  --ds-button-font-size: 16px;
+  --ds-button-foreground: hsl(var(--primary));
+  --ds-button-font-weight: 400;
+  --ds-button-background: transparent;
+  --ds-button-hover-background: hsla(var(--primary), 10%);
+  --ds-button-radius: 0;
+
+  flex-direction: column;
+}
+
+button.daySelected {
+  position: relative;
+  --ds-button-background: hsla(var(--primary), 10%);
+}
+
+button.day b {
+  text-transform: uppercase;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  padding: 34px 16px;
+  background-color: hsla(var(--primary), 10%);
+}
+
+.infoBottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+}
+
+@media (min-width: 840px) {
+  .infoBottom {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+}
+
+.expandButton {
+  margin: 0 auto;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.20.17",
+  "version": "1.21.0",
   "peerDependencies": {
     "dt-design-system": "^3.1.5",
     "leaflet": "^1.9.1",
@@ -26,6 +26,7 @@
     "awesome-debounce-promise": "2.1.0",
     "classnames": "2.3.2",
     "css-scrollbar-size": "1.0.2",
+    "framer-motion": "10.16.5",
     "react-async-hook": "4.0.0"
   },
   "devDependencies": {