@homefile/components-v2 2.53.2 → 2.54.0
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.
- package/dist/assets/locales/en/index.json +1 -0
- package/dist/components/folderSharing/FolderSharing.js +1 -1
- package/dist/components/homeAssistant/HomeAssistantWrapper.js +4 -4
- package/dist/components/homeAssistant/HomeMonitorButton.js +2 -2
- package/dist/components/homeAssistant/HomeMonitorSteps.js +3 -1
- package/dist/components/homeAssistant/StartHomiSetup.js +1 -1
- package/dist/components/homeAssistant/monitorAlerts/HomefileMonitoring.js +1 -3
- package/dist/components/homeAssistant/monitorAlerts/WeatherWidget.js +4 -1
- package/dist/components/homeBoard/HomeBoardGrid.js +8 -2
- package/dist/components/propertyTiles/trendingValue/EstCapGains.d.ts +3 -0
- package/dist/components/propertyTiles/trendingValue/EstCapGains.js +7 -0
- package/dist/components/propertyTiles/trendingValue/TrendingValue.d.ts +1 -1
- package/dist/components/propertyTiles/trendingValue/TrendingValue.js +3 -3
- package/dist/components/propertyTiles/trendingValue/index.d.ts +1 -1
- package/dist/components/propertyTiles/trendingValue/index.js +1 -1
- package/dist/helpers/homeAssistant/HomeAssistant.helper.js +4 -0
- package/dist/interfaces/homeAssistant/HomeAssistantButton.interface.d.ts +1 -0
- package/package.json +1 -1
- package/dist/components/propertyTiles/trendingValue/EstRoi.d.ts +0 -3
- package/dist/components/propertyTiles/trendingValue/EstRoi.js +0 -6
|
@@ -8,7 +8,7 @@ export const FolderSharing = ({ currentSort, folders = [], handleAddNewFolder, h
|
|
|
8
8
|
const { currentSelection, handleSelectItem, hideLabels, items, sortedFolders, } = useFolderSharing({ folders, currentSort, handleSelect });
|
|
9
9
|
const { folderVariants } = useFolderValues();
|
|
10
10
|
const hasMenuItems = !!menuItems && menuItems.length > 0;
|
|
11
|
-
return (_jsx(GridItem, { colSpan:
|
|
11
|
+
return (_jsx(GridItem, { colSpan: { base: 1, lg: 2 }, children: _jsx(TileTooltip, { label: "folders", children: _jsxs(Box, { backgroundColor: "lightBlue.1", boxShadow: "base", h: "full", children: [_jsx(ContainerHeader, { disabled: !hasMenuItems, title: t('folderSharing.title'), titleIcon: YellowFolder, menuItems: menuItems, icon: _jsx(MoreHorizontal, { size: 38 }), fontWeight: "normal", showHelp: showHelp }), _jsx(Box, { bg: "lightBlue.2", py: "2", pl: "base", children: _jsxs(Flex, { justify: "space-between", align: "center", gap: "base", children: [_jsx(SelectInput, { handleClick: handleSelectItem, initialValue: currentSelection, items: items }), _jsxs(Flex, { alignSelf: "flex-end", gap: "6", children: [!hideLabels && _jsx(FolderLegends, {}), _jsx(LeftButtonAnimated, { id: "addFolders", onClick: handleAddNewFolder, label: t('folderSharing.addFolder.label'), disabled: disabled })] })] }) }), _jsx(Wrap, { py: "8", px: "base", spacing: "2", id: "folder", children: sortedFolders === null || sortedFolders === void 0 ? void 0 : sortedFolders.map((folder) => {
|
|
12
12
|
var _a;
|
|
13
13
|
const { _id, name, icon } = folder;
|
|
14
14
|
const folderIcon = icon
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import { Box, GridItem
|
|
4
|
-
import { ContainerHeader, TileTooltip
|
|
5
|
-
import {
|
|
3
|
+
import { Box, GridItem } from '@chakra-ui/react';
|
|
4
|
+
import { ContainerHeader, TileTooltip } from '../../components';
|
|
5
|
+
import { IA } from '../../assets/images';
|
|
6
6
|
import { colors } from '../../theme/colors';
|
|
7
7
|
export const HomeAssistantWrapper = ({ children, showAirplane, title, zIndex, showHelp, menuItems, }) => {
|
|
8
8
|
const [timeOfDay, setTimeOfDay] = useState('day');
|
|
@@ -19,5 +19,5 @@ export const HomeAssistantWrapper = ({ children, showAirplane, title, zIndex, sh
|
|
|
19
19
|
// }, 60000)
|
|
20
20
|
// return () => clearInterval(interval)
|
|
21
21
|
// }, [])
|
|
22
|
-
return (_jsx(GridItem, { colSpan:
|
|
22
|
+
return (_jsx(GridItem, { colSpan: { base: 1, lg: 2 }, zIndex: zIndex, children: _jsx(TileTooltip, { label: "homeAssistant", children: _jsxs(Box, { bgGradient: gradients[timeOfDay], boxShadow: "base", position: "relative", overflow: "hidden", transition: "background 1s ease-in-out", h: "full", children: [_jsx(ContainerHeader, { showHelp: showHelp, title: title, titleIcon: IA, fontWeight: 'normal', menuItems: menuItems }), _jsx(Box, { h: "calc(100% - 60px)", children: children })] }) }) }));
|
|
23
23
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Box, Center, Image, Stack, Text } from '@chakra-ui/react';
|
|
3
3
|
import { keyframes } from '@emotion/react';
|
|
4
4
|
import { IconMenu, MoreHorizontal } from '../../components';
|
|
@@ -13,7 +13,7 @@ export const HomeMonitorButton = ({ alertCount = 0, currentStep, onStepClick, st
|
|
|
13
13
|
menuItems,
|
|
14
14
|
index,
|
|
15
15
|
});
|
|
16
|
-
return (_jsx(Box, Object.assign({ position: "relative", id: buttonId, boxShadow: "lg", bottom: `${bottomOffset}px`, minH: "106px", onMouseEnter: handleEnter, onMouseLeave: handleLeave, onPointerEnter: handleEnter, onPointerLeave: handleLeave }, getContainerStyles(status), { children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", children: [_jsx(Box, { bg: alert ? 'error.2' : 'green.1', boxSize: "14px", borderRadius: "full", position: "absolute", top: "13px", left: "13px" }), _jsx(Box, { position: "absolute", top: "2px", right: "7px", zIndex: "1400", children: _jsx(IconMenu, { width: "fit-content", icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: index + 1, menuItems: wrappedMenuItems, disabled: isDisabled, onClick: handleMenuClick, placement: "top" }) }), !isCollapsed && (_jsxs(Stack, { position: "relative", as: "button", spacing: "7px", border: "1px solid transparent", align: "center", justify: "center", w: "100%", p: "base", pt: "
|
|
16
|
+
return (_jsx(Box, Object.assign({ position: "relative", id: buttonId, boxShadow: "lg", bottom: `${bottomOffset}px`, minH: "106px", onMouseEnter: handleEnter, onMouseLeave: handleLeave, onPointerEnter: handleEnter, onPointerLeave: handleLeave }, getContainerStyles(status), { children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", children: [_jsx(Box, { bg: alert ? 'error.2' : 'green.1', boxSize: "14px", borderRadius: "full", position: "absolute", top: "13px", left: "13px" }), _jsx(Box, { position: "absolute", top: "2px", right: "7px", zIndex: "1400", children: _jsx(IconMenu, { width: "fit-content", icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: index + 1, menuItems: wrappedMenuItems, disabled: isDisabled, onClick: handleMenuClick, placement: "top" }) }), !isCollapsed && (_jsxs(Stack, { position: "relative", as: "button", spacing: "7px", border: "1px solid transparent", align: "center", justify: "center", w: "100%", p: "base", pt: "32px", onClick: handleStepClick, children: [!alert && (_jsx(Box, { boxSize: "36px", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "100%", h: "100%", fit: "contain" }) })), alert && (_jsx(Center, { boxSize: "36px", bg: "error.2", borderRadius: "full", color: "neutral.white", lineHeight: "1", fontWeight: "bold", children: displayAlertCount })), _jsx(Center, { h: "28px", children: _jsx(Text, { fontSize: "14px", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", fontFamily: "secondary", children: step.shortTitle ? (_jsxs(_Fragment, { children: [_jsx(Box, { as: "span", display: { base: 'inline', lg: 'none' }, children: step.shortTitle }), _jsx(Box, { as: "span", display: { base: 'none', lg: 'inline' }, children: step.title })] })) : (step.title) }) })] }))] }) })));
|
|
17
17
|
};
|
|
18
18
|
const alertGradient = keyframes `
|
|
19
19
|
0% { background-position: 0% 50%; }
|
|
@@ -7,7 +7,9 @@ export const HomeMonitorSteps = ({ alerts = [], menuItems = [], onStepClick, ste
|
|
|
7
7
|
const handleStepClick = (step) => onStepClick(step);
|
|
8
8
|
return (_jsx(Flex, { gap: "base", justify: "center", children: steps.map((step, index) => {
|
|
9
9
|
var _a;
|
|
10
|
-
|
|
10
|
+
// Pains is hidden from the Home Monitor. Return null WITHOUT reindexing
|
|
11
|
+
// so the alert↔step mapping (keyed to index + 1) stays aligned.
|
|
12
|
+
return (step === null || step === void 0 ? void 0 : step.title) === 'Pains' ? null : (_jsx(Box, { position: "relative", flex: "1", children: _jsx(Fragment, { children: _jsx(HomeMonitorButton, { alertCount: (_a = alerts.find((alert) => alert.step === index + 1)) === null || _a === void 0 ? void 0 : _a.count, currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, alerts), step: step, alerts: alerts, menuItems: menuItems, index: index }) }) }, step === null || step === void 0 ? void 0 : step.title));
|
|
11
13
|
}) }));
|
|
12
14
|
};
|
|
13
15
|
const getStatus = (index, alerts) => {
|
|
@@ -6,5 +6,5 @@ import { ChevronRight, TileTooltip, VideoPlayerModal, VideoPlayerTrigger, } from
|
|
|
6
6
|
import { colors } from '../../theme/colors';
|
|
7
7
|
export const StartHomiSetup = ({ onStart, videoUrl, onSkip, }) => {
|
|
8
8
|
const [url, setUrl] = useState();
|
|
9
|
-
return (_jsx(GridItem, { colSpan:
|
|
9
|
+
return (_jsx(GridItem, { colSpan: { base: 1, lg: 2 }, children: _jsx(TileTooltip, { label: "homeAssistant", children: _jsxs(Stack, { w: "full", h: "full", spacing: "4", align: "center", justify: "center", bg: "lightGreen.1", pt: "12", children: [_jsx(Text, { fontSize: "24px", lineHeight: "28px", textAlign: "center", whiteSpace: "pre-line", children: t('homeAssistant.setupTitle') }), _jsx(Text, { fontFamily: "secondary", textAlign: "center", whiteSpace: "pre-line", children: t('homeAssistant.setupSubtitle') }), videoUrl && (_jsx(Box, { boxShadow: "lg", w: "395px", my: "3", children: _jsx(VideoPlayerTrigger, { url: videoUrl, value: videoUrl, ratio: 16 / 9, onPlay: (value) => setUrl(value) }) })), _jsxs(Stack, { bg: "neutral.white", pb: "4", pt: "2", spacing: "4", w: "full", align: "center", children: [_jsx(Button, { onClick: onStart, textTransform: "capitalize", mt: "4", w: "395px", children: _jsxs(Flex, { align: "center", justify: "space-between", w: "full", px: "base", children: [_jsx(Text, { color: "neutral.white", children: t('homeAssistant.setupButton') }), _jsx(Circle, { size: "40px", bg: "blue.1", color: "neutral.white", children: _jsx(ChevronRight, { size: 26, stroke: colors.neutral.white }) })] }) }), onSkip && (_jsx(Button, { variant: "text", onClick: onSkip, children: t('buttons.skip') }))] }), url && (_jsx(VideoPlayerModal, { url: url, onClose: () => setUrl(undefined), showOverlay: true }))] }) }) }));
|
|
10
10
|
};
|
|
@@ -2,9 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
3
|
import { t } from 'i18next';
|
|
4
4
|
import { Box, Center, Flex, Text, Image, SlideFade } from '@chakra-ui/react';
|
|
5
|
-
import { CustomCircularLoader } from '../../../components';
|
|
6
5
|
import { Exclamation } from '../../../assets/images';
|
|
7
|
-
import { Brain } from '../../../assets/images';
|
|
8
6
|
export const HomefileMonitoring = ({ alertCount = 0 }) => {
|
|
9
7
|
const [showMonitoring, setShowMonitoring] = useState(true);
|
|
10
8
|
const [showAlerts, setShowAlerts] = useState(false);
|
|
@@ -20,7 +18,7 @@ export const HomefileMonitoring = ({ alertCount = 0 }) => {
|
|
|
20
18
|
}
|
|
21
19
|
return () => clearTimeout(timeout);
|
|
22
20
|
}, [alertCount]);
|
|
23
|
-
return (
|
|
21
|
+
return (_jsx(Box, { flex: "1", zIndex: "1", children: showAlerts && (_jsx(MonitoringAlerts, { alertCount: alertCount, showAlerts: showAlerts })) }));
|
|
24
22
|
};
|
|
25
23
|
const MonitoringAlerts = ({ alertCount = 0, showAlerts = false }) => {
|
|
26
24
|
return (_jsx(SlideFade, { in: showAlerts, offsetY: "-20px", transition: { enter: { duration: 0.5 } }, children: _jsx(Box, { px: "base", borderBottomRadius: "lg", bg: "#F444DA", children: _jsxs(Flex, { align: "center", gap: "1", h: "66px", children: [_jsxs(Center, { p: "1", position: "relative", h: "24px", w: "24px", children: [_jsx(Box, { borderRadius: "full", bg: "neutral.white", opacity: 0.3, h: "full", w: "full", position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }), _jsx(Image, { src: Exclamation, h: "100%", w: "auto" })] }), _jsx(Text, { color: "neutral.white", children: t('homeAssistant.homeMonitoringAlerts', { count: alertCount }) })] }) }) }));
|
|
@@ -21,7 +21,10 @@ export const WeatherWidget = ({ current, details, forecast, header, loading = fa
|
|
|
21
21
|
.fill(0)
|
|
22
22
|
.map((_, idx) => (_jsxs(VStack, { gap: "1", width: "46px", border: "1px solid", borderColor: "gray.2", py: "2", px: "1", children: [_jsx(SkeletonBox, { height: "6px", borderRadius: "md", width: "60%" }), _jsx(Divider, { borderColor: "gray.2", borderStyle: "solid", my: "0.5" }), _jsx(SkeletonBox, { height: "18px", width: "18px", borderRadius: "full" }), _jsx(SkeletonBox, { height: "8px", borderRadius: "md", width: "70%" }), _jsx(SkeletonBox, { height: "6px", borderRadius: "md", width: "70%" })] }, idx))) })] }));
|
|
23
23
|
}
|
|
24
|
-
return (
|
|
24
|
+
return (
|
|
25
|
+
// On mobile, size the widget to the forecast width and right-align it so
|
|
26
|
+
// every row (header / details / forecast) shares the same left+right edges.
|
|
27
|
+
_jsxs(Stack, { spacing: "base", zIndex: "2", w: { base: 'fit-content', md: 'auto' }, alignSelf: { base: 'flex-end', md: 'auto' }, children: [header && (_jsxs(Flex, { justify: "space-between", align: "center", children: [header.date && (_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: header.date })), header.location && (_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: header.location }))] })), current && (_jsxs(Stack, { spacing: "0", align: "end", children: [_jsxs(HStack, { align: "start", spacing: "2", children: [current.temp != null && (_jsxs(Text, { fontSize: "38px", lineHeight: 1, color: "gray.4", children: [current.temp, "\u00B0"] })), getWeatherIcon(current.icon, 25)] }), _jsxs(Text, { fontSize: "13px", children: [_jsxs(Box, { as: "span", color: "gray.2", children: ["H", ' '] }), current.high, "\u00B0", ' ', _jsxs(Box, { as: "span", color: "gray.2", children: ["L", ' '] }), current.low, "\u00B0"] })] })), _jsx(Divider, { borderColor: BORDER_COLOR, borderStyle: "dashed" }), details && (_jsxs(Flex, { justify: "space-between", children: [_jsxs(VStack, { spacing: "0", align: "start", children: [_jsx(WeatherDetailText, { children: "Precipitation" }), details.humidity != null && (_jsx(WeatherDetailText, { children: "Humidity" })), _jsx(WeatherDetailText, { children: "Wind" })] }), _jsxs(VStack, { spacing: "0", align: "start", children: [details.precipitation != null && (_jsxs(WeatherDetailText, { children: [details.precipitation, "%"] })), details.humidity != null && (_jsxs(WeatherDetailText, { children: [details.humidity, "%"] })), details.wind && (_jsx(WeatherDetailText, { children: details.wind }))] })] })), forecast && (_jsx(Flex, { justify: "space-between", gap: "1", children: forecast.map((f) => (_jsxs(VStack, { spacing: "0", border: "1px solid", borderColor: BORDER_COLOR, borderRadius: "sm", children: [_jsx(Text, { textTransform: "uppercase", fontSize: "xxs", color: "gray.2", alignSelf: "start", ml: "0.5", children: f.day }), _jsx(Divider, { borderColor: BORDER_COLOR }), _jsxs(Stack, { spacing: "0", py: "1", align: "center", children: [_jsxs(Flex, { direction: "column", align: "center", children: [getWeatherIcon(f.icon, 14, colors.gray[3]), _jsxs(Text, { fontSize: "sm", children: [f.high, "\u00B0"] })] }), _jsx(Divider, { borderColor: BORDER_COLOR }), _jsx(Box, { px: "1", pt: "1", children: _jsxs(WeatherDetailText, { children: ["L ", f.low, "\u00B0"] }) })] })] }, f.day))) }))] }));
|
|
25
28
|
};
|
|
26
29
|
const WeatherDetailText = ({ children }) => (_jsx(Text, { textTransform: "uppercase", fontSize: "10px", lineHeight: "14px", children: children }));
|
|
27
30
|
const getWeatherIcon = (iconUrl, size = 48, color = colors.gray[4]) => {
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { Grid } from '@chakra-ui/react';
|
|
3
|
+
// Fixed-size mini-app tiles. From `lg` up, tiles hold a fixed 340px column
|
|
4
|
+
// width (wide tiles span 2 cols via GridItem colSpan={{ base:1, lg:2 }}); the
|
|
5
|
+
// grid is LEFT-locked and adds columns to the right as the window widens
|
|
6
|
+
// (3-across from ~1120px). Below `lg` (< 992px, phones + small tablets) every
|
|
7
|
+
// tile is a SINGLE FULL-WIDTH column. The `lg` switch guarantees a 2-col span
|
|
8
|
+
// always fits — so the board NEVER scrolls sideways at any width.
|
|
3
9
|
export const HomeBoardGrid = ({ children }) => {
|
|
4
|
-
return (_jsx(
|
|
10
|
+
return (_jsx(Grid, { templateColumns: { base: '1fr', lg: 'repeat(auto-fit, 340px)' }, justifyContent: "start", gap: "base", w: "full", h: "full", children: children }));
|
|
5
11
|
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { t } from 'i18next';
|
|
3
|
+
import { Center, Stack, Text } from '@chakra-ui/react';
|
|
4
|
+
import { formatNumber } from '../../../utils';
|
|
5
|
+
export const EstCapGains = ({ value = 0 }) => {
|
|
6
|
+
return (_jsxs(Stack, { spacing: "1", w: "fit-content", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: t('propertyTiles.trending.capGains') }), _jsx(Center, { bg: "green.11", h: "100%", px: "base", children: _jsx(Text, { color: "neutral.white", fontSize: "lg", fontWeight: "semibold", whiteSpace: "nowrap", children: `$${formatNumber(value)}` }) })] }));
|
|
7
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { TrendingValueI } from '../../../interfaces';
|
|
2
|
-
export declare const TrendingValue: ({ chartData, marketValue, menuItems, mortgageBalance, onMortgageClick, purchasePrice,
|
|
2
|
+
export declare const TrendingValue: ({ chartData, marketValue, menuItems, mortgageBalance, onMortgageClick, purchasePrice, showHelp }: TrendingValueI) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { t } from 'i18next';
|
|
3
3
|
import { Box, Button, Flex, IconButton, Stack, Text, Tooltip, } from '@chakra-ui/react';
|
|
4
|
-
import { Edit,
|
|
4
|
+
import { Edit, EstCapGains, Plus, TileCard, TileTooltip, TrendingLineChart, TrendingValueCard, } from '../../../components';
|
|
5
5
|
import { ComputerReport } from '../../../assets/images';
|
|
6
6
|
import { colors } from '../../../theme/colors';
|
|
7
|
-
export const TrendingValue = ({ chartData, marketValue = 0, menuItems, mortgageBalance = 0, onMortgageClick, purchasePrice = 0,
|
|
8
|
-
return (_jsx(TileTooltip, { label: "trendingValue", children: _jsx(Box, { children: _jsxs(TileCard, { bg: "lightGreen.8", menuItems: menuItems, title: t('propertyTiles.trending.title'), icon: ComputerReport, fontWeight: "normal", showHelp: showHelp, children: [_jsxs(Flex, { gap: "base", p: "base", bg: "lightBlue.1", children: [_jsx(TrendingValueCard, { bg: "lightBlue.2", label: t('propertyTiles.trending.purchase'), value: purchasePrice }), (mortgageBalance > 0) ? (_jsx(TrendingValueCard, { bg: "lightBlue.4", editButton: Boolean(mortgageBalance) && (_jsx(Tooltip, { label: t('tooltips.editMortgage'), children: _jsx(IconButton, { variant: "menuIconWithShadow", maxW: "fit-content", "aria-label": t('ariaLabels.edit'), p: "1", icon: _jsx(Edit, { size: 16 }), onClick: onMortgageClick }) })), label: t('propertyTiles.trending.mortgage'), value: mortgageBalance })) : (_jsxs(Stack, { spacing: "1", flex: "auto", children: [_jsx(Flex, { align: "center", justify: "space-between", h: "20px", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: t('propertyTiles.trending.mortgage') }) }), _jsxs(Button, { variant: "tertiary", h: "full", onClick: onMortgageClick, w: "full", px: "1", children: [_jsx(Plus, { stroke: colors.blue[3], size: 20 }), _jsx(Text, { color: colors.blue[3], as: "span", pl: '.25rem', children: t('propertyTiles.trending.addMortgage') })] })] }))] }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { children: [_jsx(TrendingValueCard, { bg: "lightGreen.6", fontSize: "3xl", label: t('propertyTiles.trending.estimated'), value: marketValue }),
|
|
7
|
+
export const TrendingValue = ({ chartData, marketValue = 0, menuItems, mortgageBalance = 0, onMortgageClick, purchasePrice = 0, showHelp }) => {
|
|
8
|
+
return (_jsx(TileTooltip, { label: "trendingValue", children: _jsx(Box, { children: _jsxs(TileCard, { bg: "lightGreen.8", menuItems: menuItems, title: t('propertyTiles.trending.title'), icon: ComputerReport, fontWeight: "normal", showHelp: showHelp, children: [_jsxs(Flex, { gap: "base", p: "base", bg: "lightBlue.1", children: [_jsx(TrendingValueCard, { bg: "lightBlue.2", label: t('propertyTiles.trending.purchase'), value: purchasePrice }), (mortgageBalance > 0) ? (_jsx(TrendingValueCard, { bg: "lightBlue.4", editButton: Boolean(mortgageBalance) && (_jsx(Tooltip, { label: t('tooltips.editMortgage'), children: _jsx(IconButton, { variant: "menuIconWithShadow", maxW: "fit-content", "aria-label": t('ariaLabels.edit'), p: "1", icon: _jsx(Edit, { size: 16 }), onClick: onMortgageClick }) })), label: t('propertyTiles.trending.mortgage'), value: mortgageBalance })) : (_jsxs(Stack, { spacing: "1", flex: "auto", children: [_jsx(Flex, { align: "center", justify: "space-between", h: "20px", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: t('propertyTiles.trending.mortgage') }) }), _jsxs(Button, { variant: "tertiary", h: "full", onClick: onMortgageClick, w: "full", px: "1", children: [_jsx(Plus, { stroke: colors.blue[3], size: 20 }), _jsx(Text, { color: colors.blue[3], as: "span", pl: '.25rem', children: t('propertyTiles.trending.addMortgage') })] })] }))] }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { children: [_jsx(TrendingValueCard, { bg: "lightGreen.6", fontSize: "3xl", label: t('propertyTiles.trending.estimated'), value: marketValue }), purchasePrice > 0 && (_jsx(EstCapGains, { value: marketValue - purchasePrice }))] }), chartData && _jsx(TrendingLineChart, { data: chartData }), !chartData && (_jsx(Box, { h: "220px", border: "1px solid", borderColor: "lightGreen.6" })), _jsx(Text, { fontFamily: "secondary", fontSize: "xs", children: t('propertyTiles.trending.public') })] })] }) }) }));
|
|
9
9
|
};
|
|
@@ -6,10 +6,12 @@ export const homeAssistantSteps = [
|
|
|
6
6
|
},
|
|
7
7
|
{
|
|
8
8
|
title: 'Smoke & CO2',
|
|
9
|
+
shortTitle: 'Smoke',
|
|
9
10
|
icon: Fire,
|
|
10
11
|
},
|
|
11
12
|
{
|
|
12
13
|
title: 'Heating & Cooling',
|
|
14
|
+
shortTitle: 'HVAC',
|
|
13
15
|
icon: Temperature,
|
|
14
16
|
},
|
|
15
17
|
{
|
|
@@ -32,6 +34,7 @@ export const homeAssistantWizardSteps = [
|
|
|
32
34
|
},
|
|
33
35
|
{
|
|
34
36
|
title: 'Smoke & CO2 detectors',
|
|
37
|
+
shortTitle: 'Smoke',
|
|
35
38
|
icon: Fire,
|
|
36
39
|
},
|
|
37
40
|
{
|
|
@@ -40,6 +43,7 @@ export const homeAssistantWizardSteps = [
|
|
|
40
43
|
},
|
|
41
44
|
{
|
|
42
45
|
title: 'Heating & Cooling',
|
|
46
|
+
shortTitle: 'HVAC',
|
|
43
47
|
icon: Temperature,
|
|
44
48
|
},
|
|
45
49
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { t } from 'i18next';
|
|
3
|
-
import { Center, Stack, Text } from '@chakra-ui/react';
|
|
4
|
-
export const EstRoi = ({ value = '' }) => {
|
|
5
|
-
return (_jsxs(Stack, { spacing: "1", w: "fit-content", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: t('propertyTiles.trending.roi') }), _jsx(Center, { bg: "green.11", h: "100%", px: "base", children: _jsx(Text, { color: "neutral.white", fontSize: "lg", fontWeight: "semibold", children: value }) })] }));
|
|
6
|
-
};
|