@homefile/components-v2 2.53.2 → 2.55.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 +14 -2
- package/dist/components/homeAssistant/HomeMonitorSteps.js +3 -1
- package/dist/components/homeAssistant/StartHomiSetup.js +1 -1
- package/dist/components/homeAssistant/monitorAlerts/CalendarWidget.d.ts +14 -0
- package/dist/components/homeAssistant/monitorAlerts/CalendarWidget.js +43 -0
- package/dist/components/homeAssistant/monitorAlerts/HomefileMonitoring.js +1 -3
- package/dist/components/homeAssistant/monitorAlerts/WeatherWidget.js +3 -1
- package/dist/components/homeAssistant/monitorAlerts/WidgetCarousel.d.ts +12 -0
- package/dist/components/homeAssistant/monitorAlerts/WidgetCarousel.js +20 -0
- package/dist/components/homeAssistant/monitorAlerts/index.d.ts +2 -0
- package/dist/components/homeAssistant/monitorAlerts/index.js +2 -0
- package/dist/components/homeBoard/HomeBoardGrid.js +8 -2
- package/dist/components/propertyTiles/charts/lineCharts/trendingLineChart/TrendingLineChart.d.ts +3 -1
- package/dist/components/propertyTiles/charts/lineCharts/trendingLineChart/TrendingLineChart.js +11 -5
- package/dist/components/propertyTiles/trendingValue/EstEquity.d.ts +3 -0
- package/dist/components/propertyTiles/trendingValue/EstEquity.js +7 -0
- package/dist/components/propertyTiles/trendingValue/RefinanceCta.d.ts +5 -0
- package/dist/components/propertyTiles/trendingValue/RefinanceCta.js +6 -0
- package/dist/components/propertyTiles/trendingValue/TrendingValue.d.ts +1 -1
- package/dist/components/propertyTiles/trendingValue/TrendingValue.js +8 -4
- package/dist/components/propertyTiles/trendingValue/index.d.ts +2 -1
- package/dist/components/propertyTiles/trendingValue/index.js +2 -1
- package/dist/helpers/homeAssistant/HomeAssistant.helper.js +4 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- 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, jsxs as _jsxs, Fragment as _Fragment } 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,12 +13,24 @@ 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: "
|
|
16
|
+
return (_jsx(Box, Object.assign({ position: "relative", id: buttonId, boxShadow: "md", 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: [_jsxs(Box, { position: "absolute", top: "13px", left: "13px", boxSize: "14px", children: [!alert && (_jsx(Box, { position: "absolute", inset: "0", borderRadius: "full", bg: "green.1",
|
|
17
|
+
// Stagger each card's pulse (varied duration + delay by index)
|
|
18
|
+
// so they don't beat in unison — feels organic, not robotic.
|
|
19
|
+
animation: `${monitorPulse} ${1.8 + (index % 3) * 0.4}s ease-out ${(index % 5) * 0.45}s infinite`, sx: {
|
|
20
|
+
'@media (prefers-reduced-motion: reduce)': {
|
|
21
|
+
animation: 'none',
|
|
22
|
+
},
|
|
23
|
+
} })), _jsx(Box, { position: "absolute", inset: "0", borderRadius: "full", bg: alert ? 'error.2' : 'green.1' })] }), _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
24
|
};
|
|
18
25
|
const alertGradient = keyframes `
|
|
19
26
|
0% { background-position: 0% 50%; }
|
|
20
27
|
100% { background-position: 100% 50%; }
|
|
21
28
|
`;
|
|
29
|
+
// Ring expands outward from the status dot and fades — "live monitoring".
|
|
30
|
+
const monitorPulse = keyframes `
|
|
31
|
+
0% { transform: scale(1); opacity: 0.55; }
|
|
32
|
+
100% { transform: scale(2.4); opacity: 0; }
|
|
33
|
+
`;
|
|
22
34
|
const getContainerStyles = (status) => {
|
|
23
35
|
const base = {
|
|
24
36
|
cursor: 'pointer',
|
|
@@ -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
|
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export interface CalendarWidgetI {
|
|
2
|
+
/** Header — date on the left, location on the right (matches WeatherWidget). */
|
|
3
|
+
header?: {
|
|
4
|
+
date?: string;
|
|
5
|
+
location?: string;
|
|
6
|
+
};
|
|
7
|
+
/** ISO dates (YYYY-MM-DD) that have an event — rendered with a blue dot. */
|
|
8
|
+
events?: string[];
|
|
9
|
+
/** Month to open on (defaults to the current month). */
|
|
10
|
+
initialMonth?: Date;
|
|
11
|
+
/** Fired when a date with an event is tapped (opens the day's panel). */
|
|
12
|
+
onDateClick?: (isoDate: string) => void;
|
|
13
|
+
}
|
|
14
|
+
export declare const CalendarWidget: ({ header, events, initialMonth, onDateClick, }: CalendarWidgetI) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo, useState } from 'react';
|
|
3
|
+
import { Box, Center, Flex, SimpleGrid, Stack, Text } from '@chakra-ui/react';
|
|
4
|
+
import { ChevronLeft, ChevronRight } from '../../../components';
|
|
5
|
+
import { colors } from '../../../theme/colors';
|
|
6
|
+
const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
7
|
+
const MONTHS = [
|
|
8
|
+
'January', 'February', 'March', 'April', 'May', 'June',
|
|
9
|
+
'July', 'August', 'September', 'October', 'November', 'December',
|
|
10
|
+
];
|
|
11
|
+
const toISO = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
|
12
|
+
export const CalendarWidget = ({ header, events = [], initialMonth, onDateClick, }) => {
|
|
13
|
+
const today = useMemo(() => new Date(), []);
|
|
14
|
+
const [viewDate, setViewDate] = useState(() => initialMonth !== null && initialMonth !== void 0 ? initialMonth : new Date(today.getFullYear(), today.getMonth(), 1));
|
|
15
|
+
const eventSet = useMemo(() => new Set(events), [events]);
|
|
16
|
+
const year = viewDate.getFullYear();
|
|
17
|
+
const month = viewDate.getMonth();
|
|
18
|
+
const cells = useMemo(() => {
|
|
19
|
+
const first = new Date(year, month, 1);
|
|
20
|
+
const start = new Date(year, month, 1 - first.getDay()); // back to Sunday
|
|
21
|
+
return Array.from({ length: 42 }, (_, i) => {
|
|
22
|
+
const d = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
|
|
23
|
+
return d;
|
|
24
|
+
});
|
|
25
|
+
}, [year, month]);
|
|
26
|
+
const shiftMonth = (delta) => setViewDate(new Date(year, month + delta, 1));
|
|
27
|
+
return (
|
|
28
|
+
// Transparent — sits on the tile's sky background.
|
|
29
|
+
_jsxs(Stack, { spacing: "3", zIndex: "2", fontFamily: "primary", w: "full", 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 }))] })), _jsxs(Flex, { justify: "space-between", align: "center", children: [_jsxs(Text, { fontSize: "xs", fontWeight: "medium", textTransform: "uppercase", color: "gray.4", children: [MONTHS[month], " ", year] }), _jsxs(Flex, { gap: "1", children: [_jsx(Box, { as: "button", "aria-label": "Previous month", onClick: () => shiftMonth(-1), children: _jsx(ChevronLeft, { size: 16, stroke: colors.blue[3] }) }), _jsx(Box, { as: "button", "aria-label": "Next month", onClick: () => shiftMonth(1), children: _jsx(ChevronRight, { size: 16, stroke: colors.blue[3] }) })] })] }), _jsxs(SimpleGrid, { columns: 7, spacingY: "2", children: [WEEKDAYS.map((wd) => (_jsx(Center, { children: _jsx(Text, { fontSize: "12px", fontWeight: "medium", textTransform: "uppercase", color: "lightBlue.6", children: wd }) }, wd))), cells.map((d) => {
|
|
30
|
+
const iso = toISO(d);
|
|
31
|
+
const inMonth = d.getMonth() === month;
|
|
32
|
+
const isToday = iso === toISO(today);
|
|
33
|
+
const hasEvent = eventSet.has(iso);
|
|
34
|
+
return (_jsx(Center, { children: _jsx(Center, { as: hasEvent ? 'button' : 'div', onClick: hasEvent ? () => onDateClick === null || onDateClick === void 0 ? void 0 : onDateClick(iso) : undefined, boxSize: "22px", borderRadius: "full",
|
|
35
|
+
// Event → filled dark-blue circle (hidden until there's an
|
|
36
|
+
// event). Today → outline circle only.
|
|
37
|
+
bg: hasEvent ? 'blue.2' : 'transparent', border: isToday && !hasEvent ? '1px solid' : undefined, borderColor: isToday && !hasEvent ? 'blue.2' : undefined, cursor: hasEvent ? 'pointer' : 'default', children: _jsx(Text, { fontSize: "11px", fontWeight: "medium", color: hasEvent
|
|
38
|
+
? 'neutral.white'
|
|
39
|
+
: inMonth
|
|
40
|
+
? 'gray.4'
|
|
41
|
+
: 'lightBlue.6', children: d.getDate() }) }) }, iso));
|
|
42
|
+
})] })] }));
|
|
43
|
+
};
|
|
@@ -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,9 @@ 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
|
+
// Fills the carousel slot (same width as the calendar widget).
|
|
26
|
+
_jsxs(Stack, { spacing: "base", zIndex: "2", w: "full", 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, { gap: "3px", children: forecast.map((f) => (_jsxs(VStack, { flex: "1", 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
27
|
};
|
|
26
28
|
const WeatherDetailText = ({ children }) => (_jsx(Text, { textTransform: "uppercase", fontSize: "10px", lineHeight: "14px", children: children }));
|
|
27
29
|
const getWeatherIcon = (iconUrl, size = 48, color = colors.gray[4]) => {
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface WidgetCarouselI {
|
|
3
|
+
/** One node per widget (e.g. <WeatherWidget />, <CalendarWidget />). */
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Swappable widget slot for the Homi Monitor. Shows one widget at a time with
|
|
8
|
+
* dot indicators (bottom-left) and prev/next arrows (bottom-right) to cycle.
|
|
9
|
+
* Transparent — sits on the tile's sky background. A single widget renders
|
|
10
|
+
* with no controls.
|
|
11
|
+
*/
|
|
12
|
+
export declare const WidgetCarousel: ({ children }: WidgetCarouselI) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Children, useState } from 'react';
|
|
3
|
+
import { Box, Flex, HStack, Stack } from '@chakra-ui/react';
|
|
4
|
+
import { ChevronLeft, ChevronRight } from '../../../components';
|
|
5
|
+
import { colors } from '../../../theme/colors';
|
|
6
|
+
/**
|
|
7
|
+
* Swappable widget slot for the Homi Monitor. Shows one widget at a time with
|
|
8
|
+
* dot indicators (bottom-left) and prev/next arrows (bottom-right) to cycle.
|
|
9
|
+
* Transparent — sits on the tile's sky background. A single widget renders
|
|
10
|
+
* with no controls.
|
|
11
|
+
*/
|
|
12
|
+
export const WidgetCarousel = ({ children }) => {
|
|
13
|
+
const items = Children.toArray(children);
|
|
14
|
+
const [index, setIndex] = useState(0);
|
|
15
|
+
const count = items.length;
|
|
16
|
+
if (count === 0)
|
|
17
|
+
return null;
|
|
18
|
+
const go = (next) => setIndex((next + count) % count);
|
|
19
|
+
return (_jsxs(Stack, { spacing: "3", zIndex: "2", justify: "space-between", h: "full", w: "210px", alignSelf: { base: 'flex-end', md: 'auto' }, children: [_jsx(Box, { children: items[Math.min(index, count - 1)] }), count > 1 && (_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx(HStack, { spacing: "1.5", children: items.map((_, i) => (_jsx(Box, { as: "button", "aria-label": `Show widget ${i + 1}`, onClick: () => setIndex(i), boxSize: "7px", borderRadius: "full", border: "1px solid", borderColor: "blue.2", bg: i === index ? 'blue.2' : 'transparent' }, i))) }), _jsxs(Flex, { gap: "2", children: [_jsx(Box, { as: "button", "aria-label": "Previous widget", onClick: () => go(index - 1), children: _jsx(ChevronLeft, { size: 16, stroke: colors.blue[3] }) }), _jsx(Box, { as: "button", "aria-label": "Next widget", onClick: () => go(index + 1), children: _jsx(ChevronRight, { size: 16, stroke: colors.blue[3] }) })] })] }))] }));
|
|
20
|
+
};
|
|
@@ -6,6 +6,8 @@ export * from './BaseAlertCard';
|
|
|
6
6
|
export * from './BackendAlert';
|
|
7
7
|
export * from './BackendAlertCard';
|
|
8
8
|
export * from './WeatherWidget';
|
|
9
|
+
export * from './CalendarWidget';
|
|
10
|
+
export * from './WidgetCarousel';
|
|
9
11
|
export * from './HomefileMonitoring';
|
|
10
12
|
export * from './HomeMonitorPanel';
|
|
11
13
|
export * from './HomieAddItems';
|
|
@@ -6,6 +6,8 @@ export * from './BaseAlertCard';
|
|
|
6
6
|
export * from './BackendAlert';
|
|
7
7
|
export * from './BackendAlertCard';
|
|
8
8
|
export * from './WeatherWidget';
|
|
9
|
+
export * from './CalendarWidget';
|
|
10
|
+
export * from './WidgetCarousel';
|
|
9
11
|
export * from './HomefileMonitoring';
|
|
10
12
|
export * from './HomeMonitorPanel';
|
|
11
13
|
export * from './HomieAddItems';
|
|
@@ -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
|
};
|
package/dist/components/propertyTiles/charts/lineCharts/trendingLineChart/TrendingLineChart.d.ts
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
import { TrendingLineChartI } from '../../../../../interfaces';
|
|
2
|
-
export declare const TrendingLineChart: ({ data }: TrendingLineChartI
|
|
2
|
+
export declare const TrendingLineChart: ({ data, purchasePrice, }: TrendingLineChartI & {
|
|
3
|
+
purchasePrice?: number;
|
|
4
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
package/dist/components/propertyTiles/charts/lineCharts/trendingLineChart/TrendingLineChart.js
CHANGED
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Box, Stack } from '@chakra-ui/react';
|
|
3
|
-
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, } from 'recharts';
|
|
3
|
+
import { LineChart, Line, XAxis, YAxis, CartesianGrid, ReferenceDot, Tooltip, ResponsiveContainer, } from 'recharts';
|
|
4
4
|
import { contentStyle, cursorStyle, labelStyle, itemStyle, yAxisStyle, TrendingLineChartHeader, } from '../../../../../components';
|
|
5
5
|
import { colors } from '../../../../../theme/colors';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
// Simplify Y-axis labels: 1000000 -> 1M, 500000 -> 500k, 220000 -> 220k.
|
|
7
|
+
const formatAxisValue = (v) => v >= 1000000
|
|
8
|
+
? `${+(v / 1000000).toFixed(1)}M`
|
|
9
|
+
: v >= 1000
|
|
10
|
+
? `${Math.round(v / 1000)}k`
|
|
11
|
+
: `${v}`;
|
|
12
|
+
export const TrendingLineChart = ({ data = [], purchasePrice = 0, }) => {
|
|
13
|
+
return (_jsxs(Stack, { spacing: "base", bg: "neutral.white", p: "base", children: [_jsx(TrendingLineChartHeader, {}), _jsx(ResponsiveContainer, { width: "100%", height: 140, children: _jsxs(LineChart, { data: data, margin: {
|
|
14
|
+
left: -6,
|
|
9
15
|
right: 8,
|
|
10
16
|
bottom: -10,
|
|
11
|
-
}, children: [_jsx(CartesianGrid, {}), _jsx(XAxis, { dataKey: "year", style: yAxisStyle }), _jsx(YAxis, { style: yAxisStyle }), _jsx(Tooltip, { contentStyle: contentStyle, cursor: cursorStyle, labelStyle: labelStyle, itemStyle: itemStyle }), _jsx(Line, { type: "monotone", dataKey: "value", stroke: colors.green[1], strokeWidth: 3, dot: _jsx(Box, {}) }), _jsx(Line, { type: "monotone", dataKey: "invested", stroke: colors.yellow[1], strokeWidth: 3, dot: _jsx(Box, {}) }), _jsx(Line, { type: "monotone", strokeDasharray: "5 5", dataKey: "balance", stroke: colors.blue[8], strokeWidth: 3, dot: _jsx(Box, {}) })] }) })] }));
|
|
17
|
+
}, children: [_jsx(CartesianGrid, { horizontal: false }), purchasePrice > 0 && data.length > 0 && (_jsx(ReferenceDot, { x: data[0].year, y: purchasePrice, r: 4, fill: colors.gray[3], stroke: "none" })), _jsx(XAxis, { dataKey: "year", style: yAxisStyle }), _jsx(YAxis, { style: yAxisStyle, tickFormatter: formatAxisValue, width: 42 }), _jsx(Tooltip, { contentStyle: contentStyle, cursor: cursorStyle, labelStyle: labelStyle, itemStyle: itemStyle }), _jsx(Line, { type: "monotone", dataKey: "value", stroke: colors.green[1], strokeWidth: 3, dot: _jsx(Box, {}) }), _jsx(Line, { type: "monotone", dataKey: "invested", stroke: colors.yellow[1], strokeWidth: 3, dot: _jsx(Box, {}) }), _jsx(Line, { type: "monotone", strokeDasharray: "5 5", dataKey: "balance", stroke: colors.blue[8], strokeWidth: 3, dot: _jsx(Box, {}) })] }) })] }));
|
|
12
18
|
};
|
|
@@ -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 EstEquity = ({ value = 0 }) => {
|
|
6
|
+
return (_jsxs(Stack, { spacing: "1", w: "fit-content", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: t('propertyTiles.trending.equity') }), _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
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Button, Flex, Text } from '@chakra-ui/react';
|
|
3
|
+
/** Savings/piggy-bank mark for the HELOC / refinance CTA. */
|
|
4
|
+
const PiggyIcon = () => (_jsxs(Box, { as: "svg", width: "24px", height: "33px", viewBox: "0 0 23.632 32.423", flexShrink: 0, children: [_jsx("path", { d: "M16.984,19.77h-.011a9.878,9.878,0,1,1,.011,0m7.168-9.886a7.179,7.179,0,1,0-7.179,7.179,7.179,7.179,0,0,0,7.179-7.179", transform: "translate(-5.169 0)", fill: "#fea856" }), _jsx("path", { d: "M24.25,9.981a7.179,7.179,0,1,1-7.179,7.179A7.179,7.179,0,0,1,24.25,9.981", transform: "translate(-12.445 -7.276)", fill: "#f6cf76" }), _jsx("path", { d: "M56.37,86.087l8.352-4.146c-.054.149-1.816,4.9-3.55,5.77a3.567,3.567,0,0,1-4.786-1.588l-.016-.035", transform: "translate(-41.093 -59.734)", fill: "#00a1aa" }), _jsx("path", { d: "M63.751,79.558l0,0L55.4,83.707A3.566,3.566,0,0,1,57,78.956c1.762-.883,6.751.6,6.751.6", transform: "translate(-40.119 -57.354)", fill: "#00c0b7" }), _jsx("path", { d: "M8.362,86.087l-.016.035A3.567,3.567,0,0,1,3.56,87.711c-1.734-.87-3.5-5.621-3.55-5.77Z", transform: "translate(-0.007 -59.734)", fill: "#00a1aa" }), _jsx("path", { d: "M6.751,78.955a3.566,3.566,0,0,1,1.6,4.751L0,79.56l0,0s4.989-1.485,6.751-.6", transform: "translate(0 -57.353)", fill: "#00c0b7" }), _jsx("rect", { width: "0.813", height: "12.705", transform: "translate(11.409 19.719)", fill: "#00a1aa" }), _jsx("path", { d: "M33.63,98.347l-3.467-1.721.362-.728,3.461,1.718-.17.37Z", transform: "translate(-21.989 -69.908)", fill: "#00a1aa" }), _jsx("path", { d: "M43.253,98.344l-.377-.72L46.352,95.9l.362.728Z", transform: "translate(-31.256 -69.908)", fill: "#00a1aa" }), _jsx("path", { d: "M34.719,25.744a1.991,1.991,0,0,0,1.1.545V23.346a7.484,7.484,0,0,1-1.015-.317,2.561,2.561,0,0,1-.711-.411,1.423,1.423,0,0,1-.417-.583,2.558,2.558,0,0,1,.044-1.749,2.238,2.238,0,0,1,1.2-1.2,2.757,2.757,0,0,1,.894-.211v-.733h.611v.743a2.3,2.3,0,0,1,1.433.667,3.176,3.176,0,0,1,.755,1.532h-.943a1.478,1.478,0,0,0-1.244-1.288v2.732l.666.178a3,3,0,0,1,.521.194,2.389,2.389,0,0,1,.578.383,2.145,2.145,0,0,1,.472.611,1.852,1.852,0,0,1,.194.877,2.4,2.4,0,0,1-.183.966,2.2,2.2,0,0,1-.505.727,2.384,2.384,0,0,1-.766.483,3.378,3.378,0,0,1-.977.222v.91h-.611v-.91a2.59,2.59,0,0,1-2.51-2.6h.944a1.645,1.645,0,0,0,.46,1.176m.2-5.6a1.212,1.212,0,0,0-.372.961,1.176,1.176,0,0,0,.094.494.937.937,0,0,0,.266.344,1.728,1.728,0,0,0,.405.239,4.116,4.116,0,0,0,.511.178v-2.6a1.584,1.584,0,0,0-.9.383m2.088,6.034a1.319,1.319,0,0,0,.455-.261,1.135,1.135,0,0,0,.3-.433,1.645,1.645,0,0,0,.106-.616,1.094,1.094,0,0,0-.411-.91A1.712,1.712,0,0,0,37,23.7c-.178-.07-.366-.134-.566-.195v2.788a2.27,2.27,0,0,0,.572-.112", transform: "translate(-24.286 -13.223)", fill: "#fff" })] }));
|
|
5
|
+
/** Partner CTA under the Trending Value chart — leverage home equity. */
|
|
6
|
+
export const RefinanceCta = ({ onCompareRates }) => (_jsxs(Flex, { align: "center", justify: "space-between", gap: "base", children: [_jsxs(Flex, { align: "center", gap: "3", children: [_jsx(PiggyIcon, {}), _jsx(Text, { fontSize: "sm", color: "gray.3", lineHeight: "1.25", whiteSpace: "pre-line", children: 'Considering a HELOC\nor Refinance?' })] }), _jsx(Button, { variant: "outline", size: "sm", borderColor: "blue.2", color: "blue.2", fontWeight: "medium", borderRadius: "none", flexShrink: 0, onClick: onCompareRates, children: "Get Rates" })] }));
|
|
@@ -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,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { t } from 'i18next';
|
|
3
|
-
import { Box, Button, Flex, IconButton, Stack, Text, Tooltip, } from '@chakra-ui/react';
|
|
4
|
-
import { Edit,
|
|
4
|
+
import { Box, Button, Collapse, Flex, IconButton, Stack, Text, Tooltip, } from '@chakra-ui/react';
|
|
5
|
+
import { ChevronDown, ChevronUp, Edit, EstEquity, Plus, RefinanceCta, TileCard, TileTooltip, TrendingLineChart, TrendingValueCard, } from '../../../components';
|
|
5
6
|
import { ComputerReport } from '../../../assets/images';
|
|
6
7
|
import { colors } from '../../../theme/colors';
|
|
7
|
-
export const TrendingValue = ({ chartData, marketValue = 0, menuItems, mortgageBalance = 0, onMortgageClick, purchasePrice = 0,
|
|
8
|
-
|
|
8
|
+
export const TrendingValue = ({ chartData, marketValue = 0, menuItems, mortgageBalance = 0, onMortgageClick, purchasePrice = 0, showHelp }) => {
|
|
9
|
+
// Purchase price + mortgage are "set once" inputs — collapsed by default so
|
|
10
|
+
// the value + chart get the room (future: a "predicted" segment on the chart).
|
|
11
|
+
const [showInputs, setShowInputs] = useState(false);
|
|
12
|
+
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, { as: "button", onClick: () => setShowInputs((v) => !v), align: "center", justify: "space-between", w: "full", px: "base", py: "2", bg: "lightBlue.1", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", color: "gray.3", children: "Purchase & Mortgage" }), showInputs ? _jsx(ChevronUp, { size: 16 }) : _jsx(ChevronDown, { size: 16 })] }), _jsx(Collapse, { in: showInputs, animateOpacity: true, children: _jsxs(Flex, { gap: "base", px: "base", pb: "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 }), marketValue > 0 && (_jsx(EstEquity, { value: marketValue - mortgageBalance }))] }), chartData && (_jsx(TrendingLineChart, { data: chartData, purchasePrice: purchasePrice })), !chartData && (_jsx(Box, { h: "140px", border: "1px solid", borderColor: "lightGreen.6" })), _jsx(RefinanceCta, {})] })] }) }) }));
|
|
9
13
|
};
|
|
@@ -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/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPopup, AddPropertyRecords, Address, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AppliancesReceived, AssignableReceipts, BackendAlert, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ConfirmHomeDetails, ConfirmProperty, ConfirmPropertyBody, ConfirmPropertyFooter, ConfirmPropertyRecords, ContactList, ContactsContent, ContainerHeader, ControlledWizard, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DragDropArea, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EditItemName, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeAssistantTutorial, HomeAssistantWizardPanel, HomeAssistantWizardSteps, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, HomiSms, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadApplianceAutofiler, LaunchpadAppliancePanel, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessageChatPanel, MessagePanel, MinimizedTiles, MonthlyCharge, MortgageInfo, MortgageInfoReadOnly, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewHomeDetails, NewParterDetails, NewPassword, NotBeChargedBanner, NotificationCard, Notifications, NotificationsPanel, NotificationsReminder, NpsScore, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCard, PartnerCustomerCode, PartnerCustomersToolbar, PartnerCustomersWrapper, PartnerDetails, PartnerHomeHeader, PartnerImages, PartnerPanel, PartnerServiceCard, PartnerServiceTicketCard, PartnerServiceTicketsToolbar, PartnerServiceTicketsWrapper, PartnerSidebarMenu, PartnerWizardStepBrand, PartnerWizardStepServices, PartnerWizardStepServicesSelect, PartnerWizardStepServiceZones, PartnerWizardStepCta, PartnerWizardStepSocial, PartnerWizardStepHeader, PartnerWizardStepLayout, PartnerWizardSuccessHeader, PartnerWizardSuccessBody, PartnerWizardSteps, PasswordInput, PaymentBanner, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SearchItemLoader, SearchRecords, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StartHomiSetup, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorDialog, TwoFactorSetting, UpdateList, UploadTile, UserDetails, ValueMonitor, VideoPlayer, VideoPlayerModal, ViewContactPanel, WeatherWidget, WellDone, WizardBodyPadding, WizardStepGoal, WizardSuccessHeader, WizardTextHeader, WizardValueSummary, WizardValueSummaryBody, WizardValueSummaryFooter, YtdTile, } from './components';
|
|
1
|
+
export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPopup, AddPropertyRecords, Address, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AppliancesReceived, AssignableReceipts, BackendAlert, BackHeader, BarDivider, CalendarWidget, CancelAccount, CatalogPopup, CloudsAnimation, ConfirmHomeDetails, ConfirmProperty, ConfirmPropertyBody, ConfirmPropertyFooter, ConfirmPropertyRecords, ContactList, ContactsContent, ContainerHeader, ControlledWizard, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DragDropArea, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EditItemName, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeAssistantTutorial, HomeAssistantWizardPanel, HomeAssistantWizardSteps, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, HomiSms, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadApplianceAutofiler, LaunchpadAppliancePanel, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessageChatPanel, MessagePanel, MinimizedTiles, MonthlyCharge, MortgageInfo, MortgageInfoReadOnly, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewHomeDetails, NewParterDetails, NewPassword, NotBeChargedBanner, NotificationCard, Notifications, NotificationsPanel, NotificationsReminder, NpsScore, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCard, PartnerCustomerCode, PartnerCustomersToolbar, PartnerCustomersWrapper, PartnerDetails, PartnerHomeHeader, PartnerImages, PartnerPanel, PartnerServiceCard, PartnerServiceTicketCard, PartnerServiceTicketsToolbar, PartnerServiceTicketsWrapper, PartnerSidebarMenu, PartnerWizardStepBrand, PartnerWizardStepServices, PartnerWizardStepServicesSelect, PartnerWizardStepServiceZones, PartnerWizardStepCta, PartnerWizardStepSocial, PartnerWizardStepHeader, PartnerWizardStepLayout, PartnerWizardSuccessHeader, PartnerWizardSuccessBody, PartnerWizardSteps, PasswordInput, PaymentBanner, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SearchItemLoader, SearchRecords, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StartHomiSetup, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorDialog, TwoFactorSetting, UpdateList, UploadTile, UserDetails, ValueMonitor, VideoPlayer, VideoPlayerModal, ViewContactPanel, WeatherWidget, WidgetCarousel, WellDone, WizardBodyPadding, WizardStepGoal, WizardSuccessHeader, WizardTextHeader, WizardValueSummary, WizardValueSummaryBody, WizardValueSummaryFooter, YtdTile, } from './components';
|
|
2
2
|
export { useCustomToast, useConfirmPropertyModel } from './hooks';
|
|
3
3
|
export { useFilesUploader } from './hooks/folderPanel/useFilesUploader';
|
|
4
4
|
export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPopup, AddPropertyRecords, Address, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AppliancesReceived, AssignableReceipts, BackendAlert, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ConfirmHomeDetails, ConfirmProperty, ConfirmPropertyBody, ConfirmPropertyFooter, ConfirmPropertyRecords, ContactList, ContactsContent, ContainerHeader, ControlledWizard, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DragDropArea, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EditItemName, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeAssistantTutorial, HomeAssistantWizardPanel, HomeAssistantWizardSteps, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, HomiSms, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadApplianceAutofiler, LaunchpadAppliancePanel, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessageChatPanel, MessagePanel, MinimizedTiles, MonthlyCharge, MortgageInfo, MortgageInfoReadOnly, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewHomeDetails, NewParterDetails, NewPassword, NotBeChargedBanner, NotificationCard, Notifications, NotificationsPanel, NotificationsReminder, NpsScore, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCard, PartnerCustomerCode, PartnerCustomersToolbar, PartnerCustomersWrapper, PartnerDetails, PartnerHomeHeader, PartnerImages, PartnerPanel, PartnerServiceCard, PartnerServiceTicketCard, PartnerServiceTicketsToolbar, PartnerServiceTicketsWrapper, PartnerSidebarMenu, PartnerWizardStepBrand, PartnerWizardStepServices, PartnerWizardStepServicesSelect, PartnerWizardStepServiceZones, PartnerWizardStepCta, PartnerWizardStepSocial, PartnerWizardStepHeader, PartnerWizardStepLayout, PartnerWizardSuccessHeader, PartnerWizardSuccessBody, PartnerWizardSteps, PasswordInput, PaymentBanner, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SearchItemLoader, SearchRecords, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StartHomiSetup, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorDialog, TwoFactorSetting, UpdateList, UploadTile, UserDetails, ValueMonitor, VideoPlayer, VideoPlayerModal, ViewContactPanel, WeatherWidget, WellDone, WizardBodyPadding, WizardStepGoal, WizardSuccessHeader, WizardTextHeader, WizardValueSummary, WizardValueSummaryBody, WizardValueSummaryFooter, YtdTile, } from './components';
|
|
1
|
+
export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPopup, AddPropertyRecords, Address, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AppliancesReceived, AssignableReceipts, BackendAlert, BackHeader, BarDivider, CalendarWidget, CancelAccount, CatalogPopup, CloudsAnimation, ConfirmHomeDetails, ConfirmProperty, ConfirmPropertyBody, ConfirmPropertyFooter, ConfirmPropertyRecords, ContactList, ContactsContent, ContainerHeader, ControlledWizard, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DragDropArea, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EditItemName, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeAssistantTutorial, HomeAssistantWizardPanel, HomeAssistantWizardSteps, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, HomiSms, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadApplianceAutofiler, LaunchpadAppliancePanel, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessageChatPanel, MessagePanel, MinimizedTiles, MonthlyCharge, MortgageInfo, MortgageInfoReadOnly, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewHomeDetails, NewParterDetails, NewPassword, NotBeChargedBanner, NotificationCard, Notifications, NotificationsPanel, NotificationsReminder, NpsScore, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCard, PartnerCustomerCode, PartnerCustomersToolbar, PartnerCustomersWrapper, PartnerDetails, PartnerHomeHeader, PartnerImages, PartnerPanel, PartnerServiceCard, PartnerServiceTicketCard, PartnerServiceTicketsToolbar, PartnerServiceTicketsWrapper, PartnerSidebarMenu, PartnerWizardStepBrand, PartnerWizardStepServices, PartnerWizardStepServicesSelect, PartnerWizardStepServiceZones, PartnerWizardStepCta, PartnerWizardStepSocial, PartnerWizardStepHeader, PartnerWizardStepLayout, PartnerWizardSuccessHeader, PartnerWizardSuccessBody, PartnerWizardSteps, PasswordInput, PaymentBanner, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SearchItemLoader, SearchRecords, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StartHomiSetup, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorDialog, TwoFactorSetting, UpdateList, UploadTile, UserDetails, ValueMonitor, VideoPlayer, VideoPlayerModal, ViewContactPanel, WeatherWidget, WidgetCarousel, WellDone, WizardBodyPadding, WizardStepGoal, WizardSuccessHeader, WizardTextHeader, WizardValueSummary, WizardValueSummaryBody, WizardValueSummaryFooter, YtdTile, } from './components';
|
|
2
2
|
export { useCustomToast, useConfirmPropertyModel } from './hooks';
|
|
3
3
|
export { useFilesUploader } from './hooks/folderPanel/useFilesUploader';
|
|
4
4
|
export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
|
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
|
-
};
|