@homefile/components-v2 2.21.0 → 2.21.2

package/dist/assets/locales/en/index.json

@@ -414,7 +414,8 @@
     },
     "details": "Provide details about your home’s",
     "homeMonitor": "Homie",
-    "homeMonitoring": "Homie is learning about your home.",
+    "homeMonitoring": "I’m learning about your home…",
+    "homeMonitoringAlerts": "I have {{ count }} new messages for you.",
     "monitorAlerts": {
       "collapse": "Collapse Alert",
       "homeAction": "Home Action",

package/dist/components/homeAssistant/HomeMonitor.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren } from 'react';
-export declare const HomeMonitor: ({ children, zIndex }: PropsWithChildren<{
+export declare const HomeMonitor: ({ children, zIndex, }: PropsWithChildren<{
     zIndex?: string;
 }>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeMonitor.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { HomeAssistantWrapper } from '..';
-export const HomeMonitor = ({ children, zIndex }) => {
+export const HomeMonitor = ({ children, zIndex, }) => {
     return (_jsx(HomeAssistantWrapper, { zIndex: zIndex, showAirplane: true, title: t('homeAssistant.homeMonitor'), children: children }));
 };

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

@@ -3,15 +3,17 @@ import { AlertFields, BackendAlertCard, TabsHeader } from '../..';
 import { getCategoryStyles } from '../../../utils/Alerts.utils';
 import { Divider } from '@chakra-ui/react';
 export const BackendAlert = ({ category, form, callback }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { headerBg, alertIcon, alertIconBg, alertTitle } = getCategoryStyles(category);
     const alert = form === null || form === void 0 ? void 0 : form.find((item) => item.type === 'alert');
-    const tabs = (_b = (_a = alert === null || alert === void 0 ? void 0 : alert.children) === null || _a === void 0 ? void 0 : _a.map((tab) => {
+    const hasChildren = Number((_a = alert === null || alert === void 0 ? void 0 : alert.children) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    const isSingleTab = ((_b = alert === null || alert === void 0 ? void 0 : alert.children) === null || _b === void 0 ? void 0 : _b.length) === 1;
+    const tabs = (_d = (_c = alert === null || alert === void 0 ? void 0 : alert.children) === null || _c === void 0 ? void 0 : _c.map((tab) => {
         var _a;
         return ({
             label: tab.name,
             component: (_jsx(AlertFields, { fields: (_a = tab.children) !== null && _a !== void 0 ? _a : [], callback: callback })),
         });
-    })) !== null && _b !== void 0 ? _b : [];
-    return (_jsxs(BackendAlertCard, { alertBg: headerBg, alertIcon: alertIcon, alertTitle: alertTitle, bg: alertIconBg, icon: (_c = alert === null || alert === void 0 ? void 0 : alert.icon) !== null && _c !== void 0 ? _c : '', title: (_d = alert === null || alert === void 0 ? void 0 : alert.label) !== null && _d !== void 0 ? _d : '', description: (_e = alert === null || alert === void 0 ? void 0 : alert.description) !== null && _e !== void 0 ? _e : '', children: [_jsx(Divider, {}), _jsx(TabsHeader, { tabList: tabs })] }));
+    })) !== null && _d !== void 0 ? _d : [];
+    return (_jsxs(BackendAlertCard, { alertBg: headerBg, alertIcon: alertIcon, alertTitle: alertTitle, bg: alertIconBg, icon: (_e = alert === null || alert === void 0 ? void 0 : alert.icon) !== null && _e !== void 0 ? _e : '', title: (_f = alert === null || alert === void 0 ? void 0 : alert.label) !== null && _f !== void 0 ? _f : '', description: (_g = alert === null || alert === void 0 ? void 0 : alert.description) !== null && _g !== void 0 ? _g : '', children: [_jsx(Divider, {}), hasChildren && !isSingleTab && _jsx(TabsHeader, { tabList: tabs }), hasChildren && isSingleTab && (_jsx(AlertFields, { fields: (_k = (_j = (_h = alert === null || alert === void 0 ? void 0 : alert.children) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.children) !== null && _k !== void 0 ? _k : [], callback: callback }))] }));
 };

package/dist/components/homeAssistant/monitorAlerts/HomefileMonitoring.d.ts

@@ -1 +1,3 @@
-export declare const HomefileMonitoring: () => import("react/jsx-runtime").JSX.Element;
+export declare const HomefileMonitoring: ({ alertCount }: {
+    alertCount?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { t } from 'i18next';
-import { Box, Flex, Text } from '@chakra-ui/react';
+import { Box, Center, Flex, Text, Image, SlideFade } from '@chakra-ui/react';
 import { HomieAnimation } from '../..';
-export const HomefileMonitoring = () => {
-    return (_jsx(Box, { p: "base", borderRadius: "lg", bg: "#C5E9F4", h: "66px", zIndex: "2", flex: "1", children: _jsxs(Flex, { align: "center", children: [_jsx(Box, { boxSize: "47px", children: _jsx(HomieAnimation, { animation: "homie-v3" }) }), _jsx(Text, { children: t('homeAssistant.homeMonitoring') })] }) }));
+import { Exclamation } from '../../../assets/images';
+export const HomefileMonitoring = ({ alertCount = 0 }) => {
+    const [showMonitoring, setShowMonitoring] = useState(true);
+    const [showAlerts, setShowAlerts] = useState(false);
+    useEffect(() => {
+        if (alertCount > 0) {
+            const timeout1 = setTimeout(() => setShowMonitoring(false), 2000);
+            const timeout2 = setTimeout(() => setShowAlerts(true), 3000);
+            return () => {
+                clearTimeout(timeout1);
+                clearTimeout(timeout2);
+            };
+        }
+    }, [alertCount]);
+    return (_jsxs(Box, { flex: "1", zIndex: "2", children: [showAlerts && (_jsx(MonitoringAlerts, { alertCount: alertCount, showAlerts: showAlerts })), _jsx(SlideFade, { in: showMonitoring, offsetY: "-20px", transition: { enter: { duration: 0.5 } }, children: _jsx(Box, { p: "base", borderBottomRadius: "lg", bg: "#C5E9F4", flex: "1", children: _jsxs(Flex, { align: "center", children: [_jsx(Box, { boxSize: "47px", children: _jsx(HomieAnimation, { animation: "homie-v3" }) }), _jsx(Text, { children: t('homeAssistant.homeMonitoring') })] }) }) })] }));
+};
+const MonitoringAlerts = ({ alertCount = 0, showAlerts = false }) => {
+    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 }) })] }) }) }));
 };

package/dist/stories/homeAssistant/HomeMonitor.stories.js

@@ -16,5 +16,10 @@ export const HomeMonitorComponent = () => {
         action('onStepClick')(step);
     };
     const weatherData = mapForecastToWidget(weatherDataMock, 'TX, Houston');
-    return (_jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomefileMonitoring, {}), _jsx(WeatherWidget, Object.assign({}, weatherData))] }), _jsx(HomeMonitorSteps, { menuItems: menuMock, stepsWithAlerts: [], onStepClick: handleAlertClick })] }) }));
+    const alerts = [
+        { step: 1, count: 2 },
+        { step: 3, count: 1 },
+    ];
+    const alertsCount = alerts.reduce((acc, alert) => acc + alert.count, 0);
+    return (_jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomefileMonitoring, { alertCount: alertsCount }), _jsx(WeatherWidget, Object.assign({}, weatherData))] }), _jsx(HomeMonitorSteps, { menuItems: menuMock, alerts: alerts, onStepClick: handleAlertClick })] }) }));
 };

package/dist/stories/homeAssistant/monitorAlerts/BackendAlert.stories.d.ts

@@ -3,3 +3,4 @@ import { BackendAlertI } from '../../../interfaces';
 declare const _default: Meta<BackendAlertI>;
 export default _default;
 export declare const BackendAlertComponent: (args: BackendAlertI) => import("react/jsx-runtime").JSX.Element;
+export declare const BackendAlertSingleChildrenComponent: (args: BackendAlertI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/homeAssistant/monitorAlerts/BackendAlert.stories.js

@@ -14,3 +14,9 @@ export default {
 export const BackendAlertComponent = (args) => {
     return _jsx(BackendAlert, Object.assign({}, args));
 };
+export const BackendAlertSingleChildrenComponent = (args) => {
+    var _a, _b;
+    return (_jsx(BackendAlert, Object.assign({}, args, { form: [
+            Object.assign(Object.assign({}, alertFieldsMock[0]), { children: (_b = (_a = alertFieldsMock === null || alertFieldsMock === void 0 ? void 0 : alertFieldsMock[0]) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.slice(0, 1) }),
+        ] })));
+};

package/package.json

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

package/src/assets/locales/en/index.json

@@ -414,7 +414,8 @@
     },
     "details": "Provide details about your home’s",
     "homeMonitor": "Homie",
-    "homeMonitoring": "Homie is learning about your home.",
+    "homeMonitoring": "I’m learning about your home…",
+    "homeMonitoringAlerts": "I have {{ count }} new messages for you.",
     "monitorAlerts": {
       "collapse": "Collapse Alert",
       "homeAction": "Home Action",

package/src/components/homeAssistant/HomeMonitor.tsx

@@ -2,9 +2,16 @@ import { PropsWithChildren } from 'react'
 import { t } from 'i18next'
 import { HomeAssistantWrapper } from '@/components'
 
-export const HomeMonitor = ({ children, zIndex}: PropsWithChildren<{zIndex?: string}>) => {
+export const HomeMonitor = ({
+  children,
+  zIndex,
+}: PropsWithChildren<{ zIndex?: string }>) => {
   return (
-    <HomeAssistantWrapper zIndex={zIndex} showAirplane title={t('homeAssistant.homeMonitor')}>
+    <HomeAssistantWrapper
+      zIndex={zIndex}
+      showAirplane
+      title={t('homeAssistant.homeMonitor')}
+    >
       {children}
     </HomeAssistantWrapper>
   )

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

@@ -7,6 +7,8 @@ export const BackendAlert = ({ category, form, callback }: BackendAlertI) => {
   const { headerBg, alertIcon, alertIconBg, alertTitle } =
     getCategoryStyles(category)
   const alert = form?.find((item) => item.type === 'alert')
+  const hasChildren = Number(alert?.children?.length) > 0
+  const isSingleTab = alert?.children?.length === 1
 
   const tabs =
     alert?.children?.map(
@@ -30,7 +32,13 @@ export const BackendAlert = ({ category, form, callback }: BackendAlertI) => {
       description={alert?.description ?? ''}
     >
       <Divider />
-      <TabsHeader tabList={tabs} />
+      {hasChildren && !isSingleTab && <TabsHeader tabList={tabs} />}
+      {hasChildren && isSingleTab && (
+        <AlertFields
+          fields={alert?.children?.[0]?.children ?? []}
+          callback={callback}
+        />
+      )}
     </BackendAlertCard>
   )
 }

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

@@ -1,16 +1,74 @@
+import { useEffect, useState } from 'react'
 import { t } from 'i18next'
-import { Box, Flex, Text } from '@chakra-ui/react'
+import { Box, Center, Flex, Text, Image, SlideFade } from '@chakra-ui/react'
 import { HomieAnimation } from '@/components'
+import { Exclamation } from '@/assets/images'
 
-export const HomefileMonitoring = () => {
+export const HomefileMonitoring = ({ alertCount = 0 }) => {
+  const [showMonitoring, setShowMonitoring] = useState(true)
+  const [showAlerts, setShowAlerts] = useState(false)
+
+  useEffect(() => {
+    if (alertCount > 0) {
+      const timeout1 = setTimeout(() => setShowMonitoring(false), 2000)
+      const timeout2 = setTimeout(() => setShowAlerts(true), 3000)
+      return () => {
+        clearTimeout(timeout1)
+        clearTimeout(timeout2)
+      }
+    }
+  }, [alertCount])
   return (
-    <Box p="base" borderRadius="lg" bg="#C5E9F4" h="66px" zIndex="2" flex="1">
-      <Flex align="center">
-        <Box boxSize="47px">
-          <HomieAnimation animation="homie-v3" />
+    <Box flex="1" zIndex="2">
+      {showAlerts && (
+        <MonitoringAlerts alertCount={alertCount} showAlerts={showAlerts} />
+      )}
+      <SlideFade
+        in={showMonitoring}
+        offsetY="-20px"
+        transition={{ enter: { duration: 0.5 } }}
+      >
+        <Box p="base" borderBottomRadius="lg" bg="#C5E9F4" flex="1">
+          <Flex align="center">
+            <Box boxSize="47px">
+              <HomieAnimation animation="homie-v3" />
+            </Box>
+            <Text>{t('homeAssistant.homeMonitoring')}</Text>
+          </Flex>
         </Box>
-        <Text>{t('homeAssistant.homeMonitoring')}</Text>
-      </Flex>
+      </SlideFade>
     </Box>
   )
 }
+
+const MonitoringAlerts = ({ alertCount = 0, showAlerts = false }) => {
+  return (
+    <SlideFade
+      in={showAlerts}
+      offsetY="-20px"
+      transition={{ enter: { duration: 0.5 } }}
+    >
+      <Box px="base" borderBottomRadius="lg" bg="#F444DA">
+        <Flex align="center" gap="1" h="66px">
+          <Center p="1" position="relative" h="24px" w="24px">
+            <Box
+              borderRadius="full"
+              bg="neutral.white"
+              opacity={0.3}
+              h="full"
+              w="full"
+              position="absolute"
+              top="50%"
+              left="50%"
+              transform="translate(-50%, -50%)"
+            />
+            <Image src={Exclamation} h="100%" w="auto" />
+          </Center>
+          <Text color="neutral.white">
+            {t('homeAssistant.homeMonitoringAlerts', { count: alertCount })}
+          </Text>
+        </Flex>
+      </Box>
+    </SlideFade>
+  )
+}

package/src/stories/homeAssistant/HomeMonitor.stories.tsx

@@ -28,16 +28,21 @@ export const HomeMonitorComponent = () => {
     action('onStepClick')(step)
   }
   const weatherData = mapForecastToWidget(weatherDataMock, 'TX, Houston')
+  const alerts = [
+    { step: 1, count: 2 },
+    { step: 3, count: 1 },
+  ]
+  const alertsCount = alerts.reduce((acc, alert) => acc + alert.count, 0)
   return (
     <HomeMonitor>
       <Stack spacing="base">
         <Flex gap="base">
-          <HomefileMonitoring />
+          <HomefileMonitoring alertCount={alertsCount} />
           <WeatherWidget {...weatherData} />
         </Flex>
         <HomeMonitorSteps
           menuItems={menuMock}
-          stepsWithAlerts={[]}
+          alerts={alerts}
           onStepClick={handleAlertClick}
         />
       </Stack>

package/src/stories/homeAssistant/monitorAlerts/BackendAlert.stories.tsx

@@ -17,3 +17,17 @@ export default {
 export const BackendAlertComponent = (args: BackendAlertI) => {
   return <BackendAlert {...args} />
 }
+
+export const BackendAlertSingleChildrenComponent = (args: BackendAlertI) => {
+  return (
+    <BackendAlert
+      {...args}
+      form={[
+        {
+          ...alertFieldsMock[0],
+          children: alertFieldsMock?.[0]?.children?.slice(0, 1),
+        },
+      ]}
+    />
+  )
+}