@homefile/components-v2 2.17.3 → 2.17.4

package/dist/components/forms/dynamicForm/fields/uiFields/TileBody.tsx

@@ -2,7 +2,6 @@ import { Box, Stack } from '@chakra-ui/react'
 import { TileBodyI } from '@/interfaces'
 import {
   PartnerFooter,
-  SingleFields,
   TileBodyFields,
   TileFooterFields,
   TileHeaderFields,

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

@@ -1,2 +1,2 @@
 import { BackendAlertI } from '../../../interfaces';
-export declare const BackendAlert: ({ category, icon, id, title, tabs, summary, }: BackendAlertI) => import("react/jsx-runtime").JSX.Element;
+export declare const BackendAlert: ({ category, form }: BackendAlertI) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BackendAlertCard } from '../..';
 import { getCategoryStyles } from '../../../utils/Alerts.utils';
-export const BackendAlert = ({ category, icon, id, title, tabs, summary, }) => {
+export const BackendAlert = ({ category, form }) => {
+    var _a, _b, _c;
     const { headerBg, alertIcon, alertIconBg, alertTitle } = getCategoryStyles(category);
-    return (_jsx(BackendAlertCard, { alertBg: headerBg, alertIcon: alertIcon, alertTitle: alertTitle, bg: alertIconBg, icon: icon, title: title, description: summary, children: "content" }));
+    const alertHeader = form === null || form === void 0 ? void 0 : form.find((item) => item.type === 'alertHeader');
+    return (_jsx(BackendAlertCard, { alertBg: headerBg, alertIcon: alertIcon, alertTitle: alertTitle, bg: alertIconBg, icon: (_a = alertHeader === null || alertHeader === void 0 ? void 0 : alertHeader.icon) !== null && _a !== void 0 ? _a : '', title: (_b = alertHeader === null || alertHeader === void 0 ? void 0 : alertHeader.label) !== null && _b !== void 0 ? _b : '', description: (_c = alertHeader === null || alertHeader === void 0 ? void 0 : alertHeader.description) !== null && _c !== void 0 ? _c : '', children: "content" }));
 };

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

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { BackendAlertCardI } from '../../../interfaces';
-export declare const BackendAlertCard: ({ alertBg, alertIcon, alertTitle, children, ...props }: PropsWithChildren<BackendAlertCardI>) => import("react/jsx-runtime").JSX.Element;
+export declare const BackendAlertCard: ({ alertBg, alertIcon, alertTitle, children, icon, ...props }: PropsWithChildren<BackendAlertCardI>) => import("react/jsx-runtime").JSX.Element;

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

@@ -14,8 +14,9 @@ import { t } from 'i18next';
 import { Box, Button, Collapse, Flex, useDisclosure } from '@chakra-ui/react';
 import { AlertHeader, AlertTemplate, AlertTitle } from '../..';
 import { Warranty } from '../../../assets/images';
+import { fieldIcons } from '../../../helpers';
 export const BackendAlertCard = (_a) => {
-    var { alertBg = 'error.2', alertIcon = Warranty, alertTitle = t('homeAssistant.monitorAlerts.protection'), children } = _a, props = __rest(_a, ["alertBg", "alertIcon", "alertTitle", "children"]);
+    var { alertBg = 'error.2', alertIcon = Warranty, alertTitle = t('homeAssistant.monitorAlerts.protection'), children, icon = 'warning' } = _a, props = __rest(_a, ["alertBg", "alertIcon", "alertTitle", "children", "icon"]);
     const { isOpen, onToggle } = useDisclosure();
-    return (_jsxs(Box, { display: "flex", flexDir: "column", bg: "neutral.white", boxShadow: "lg", borderRadius: "lg", overflow: "hidden", maxW: "420px", children: [_jsx(AlertHeader, { bg: alertBg }), _jsx(AlertTitle, { alertIcon: alertIcon, alertTitle: alertTitle }), _jsx(AlertTemplate, Object.assign({}, props)), _jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { p: "base", bg: "lightBlue.1", children: children }) }), _jsx(Flex, { py: "base", bg: "lightBlue.1", justify: "flex-end", children: _jsx(Button, { variant: "leftRounded", w: "fit-content", px: "8", fontSize: "sm", fontWeight: "medium", onClick: onToggle, bg: isOpen ? 'blue.8' : 'blue.2', children: t(`homeAssistant.monitorAlerts.${isOpen ? 'collapse' : 'review'}`) }) })] }));
+    return (_jsxs(Box, { display: "flex", flexDir: "column", bg: "neutral.white", boxShadow: "lg", borderRadius: "lg", overflow: "hidden", maxW: "420px", children: [_jsx(AlertHeader, { bg: alertBg }), _jsx(AlertTitle, { alertIcon: alertIcon, alertTitle: alertTitle }), _jsx(AlertTemplate, Object.assign({}, props, { icon: fieldIcons[icon] })), _jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { p: "base", bg: "lightBlue.1", children: children }) }), _jsx(Flex, { py: "base", bg: "lightBlue.1", justify: "flex-end", children: _jsx(Button, { variant: "leftRounded", w: "fit-content", px: "8", fontSize: "sm", fontWeight: "medium", onClick: onToggle, bg: isOpen ? 'blue.8' : 'blue.2', children: t(`homeAssistant.monitorAlerts.${isOpen ? 'collapse' : 'review'}`) }) })] }));
 };

package/dist/helpers/homeAssistant/HomeAssistant.helper.js

@@ -1,4 +1,4 @@
-import { Fire, House, LargeAppliances, Target, Temperature, Water, } from '../../assets/images';
+import { Fire, GearTime, House, LargeAppliances, Target, Temperature, Water, } from '../../assets/images';
 export const homeAssistantSteps = [
     {
         title: 'Goals',
@@ -30,24 +30,24 @@ export const CATEGORY_CONFIG = {
         label: 'Protection Monitor',
         color: '#DB1DA1',
         accent: '#FDDDF8',
-        icon: Fire,
+        icon: GearTime,
     },
     maintain: {
         label: 'Maintenance Monitor',
         color: '#8CC421',
         accent: '#B9DEF2',
-        icon: LargeAppliances,
+        icon: GearTime,
     },
     budget: {
         label: 'Budget Monitor',
         color: '#1D8BDB',
         accent: '#B9DEF2',
-        icon: Target,
+        icon: GearTime,
     },
     improve: {
         label: 'Improvement Monitor',
         color: '#8516A7',
         accent: '#B9DEF2',
-        icon: House,
+        icon: GearTime,
     },
 };

package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts

@@ -1,5 +1,5 @@
-import { AIGridFieldI, FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
-export type KindTypes = 'ai-image' | 'ai-grid' | 'checkbox' | 'checkbox-agreement' | 'checkbox-group' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'notes' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes | HomeItemTypes;
+import { AIGridFieldI, AlertFieldType, FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
+export type KindTypes = 'ai-image' | 'ai-grid' | 'checkbox' | 'checkbox-agreement' | 'checkbox-group' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'notes' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes | HomeItemTypes | AlertFieldType;
 export type UIKindTypes = 'tile-body' | 'tile-body-logo' | 'tile-body-header' | 'tile-body-section' | 'tile-body-section-grid' | 'tile-body-partner-image' | 'tile-body-description' | 'tile-form' | 'tile-body-action' | 'vertical-icon' | 'primary-cta' | 'secondary-cta';
 export type HomeItemTypes = 'appliances' | 'images' | 'guidelines' | 'item-related' | 'item-icon-btn';
 export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'book-opened' | 'calc' | 'calendar' | 'check' | 'co2' | 'contact' | 'date' | 'default' | 'detector' | 'electricity' | 'goldbars' | 'heart' | 'image' | 'notes' | 'palette' | 'people' | 'price' | 'rating' | 'receipt' | 'registry' | 'sprinkler' | 'tools' | 'wind' | '68' | 'calendar2' | 'water' | 'calendar-drop' | 'umbrella' | 'heater' | 'roof' | 'foundation' | 'solar-panel' | 'pool' | 'drop' | 'mobile-drop' | 'light' | 'plate' | 'pressure-washer' | 'house' | 'target' | 'title' | 'company' | UIIconTypes;

package/dist/interfaces/homeAssistant/BackendAlert.interface.d.ts

@@ -1,15 +1,7 @@
+import { DynamicFormI } from '..';
 export type AlertCategory = 'safeguard' | 'maintain' | 'budget' | 'improve';
 export type AlertTabType = 'details' | 'filter-size' | 'purchase' | 'hire-out';
-export interface AlertTab<T = unknown> {
-    key: AlertTabType;
-    label: string;
-    data: T;
-}
-export interface BackendAlertI {
-    id: string;
+export type AlertFieldType = 'alertHeader' | 'text' | 'iconSection' | 'tabList' | 'list';
+export interface BackendAlertI extends DynamicFormI {
     category: AlertCategory;
-    icon: string;
-    title: string;
-    summary: string;
-    tabs?: AlertTab[];
 }

package/dist/mocks/forms/dynamicForm.mock.d.ts

@@ -4,3 +4,4 @@ export declare const contactFieldsMock: ReportI[];
 export declare const tileUIMock: ReportI[];
 export declare const viewingHomeItemMock: ReportI[];
 export declare const unknownFormMock: Record<string, any>;
+export declare const alertFieldsMock: ReportI[];

package/dist/mocks/forms/dynamicForm.mock.js

@@ -839,3 +839,14 @@ export const unknownFormMock = {
     updatedAt: '2025-04-17T19:26:39.435Z',
     __v: 0,
 };
+export const alertFieldsMock = [
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Filter',
+        label: 'Time to change your heating & cooling air filter.',
+        description: 'Changing your air filter every 30 days ensures efficient system performance and improves indoor air quality by trapping dust and allergens.',
+        icon: 'wind',
+        value: false,
+        type: 'alertHeader',
+    },
+];

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BackendAlert } from '../../../components';
+import { alertFieldsMock } from '../../../mocks';
+export default {
+    title: 'Components/HomeAssistant/MonitorAlerts',
+    component: BackendAlert,
+    args: {
+        category: 'budget',
+        form: alertFieldsMock,
+    },
+};
+export const BackendAlertComponent = (args) => {
+    return _jsx(BackendAlert, Object.assign({}, args));
+};

package/package.json

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

package/src/components/forms/dynamicForm/fields/uiFields/TileBody.tsx

@@ -2,7 +2,6 @@ import { Box, Stack } from '@chakra-ui/react'
 import { TileBodyI } from '@/interfaces'
 import {
   PartnerFooter,
-  SingleFields,
   TileBodyFields,
   TileFooterFields,
   TileHeaderFields,

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

@@ -2,25 +2,19 @@ import { BackendAlertCard } from '@/components'
 import { BackendAlertI } from '@/interfaces'
 import { getCategoryStyles } from '@/utils/Alerts.utils'
 
-export const BackendAlert = ({
-  category,
-  icon,
-  id,
-  title,
-  tabs,
-  summary,
-}: BackendAlertI) => {
+export const BackendAlert = ({ category, form }: BackendAlertI) => {
   const { headerBg, alertIcon, alertIconBg, alertTitle } =
     getCategoryStyles(category)
+  const alertHeader = form?.find((item) => item.type === 'alertHeader')
   return (
     <BackendAlertCard
       alertBg={headerBg}
       alertIcon={alertIcon}
       alertTitle={alertTitle}
       bg={alertIconBg}
-      icon={icon}
-      title={title}
-      description={summary}
+      icon={alertHeader?.icon ?? ''}
+      title={alertHeader?.label ?? ''}
+      description={alertHeader?.description ?? ''}
     >
       content
     </BackendAlertCard>

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

@@ -2,14 +2,16 @@ import { PropsWithChildren } from 'react'
 import { t } from 'i18next'
 import { Box, Button, Collapse, Flex, useDisclosure } from '@chakra-ui/react'
 import { AlertHeader, AlertTemplate, AlertTitle } from '@/components'
-import { BackendAlertCardI } from '@/interfaces'
+import { BackendAlertCardI, IconTypes } from '@/interfaces'
 import { Warranty } from '@/assets/images'
+import { fieldIcons } from '@/helpers'
 
 export const BackendAlertCard = ({
   alertBg = 'error.2',
   alertIcon = Warranty,
   alertTitle = t('homeAssistant.monitorAlerts.protection'),
   children,
+  icon = 'warning',
   ...props
 }: PropsWithChildren<BackendAlertCardI>) => {
   const { isOpen, onToggle } = useDisclosure()
@@ -25,7 +27,7 @@ export const BackendAlertCard = ({
     >
       <AlertHeader bg={alertBg} />
       <AlertTitle alertIcon={alertIcon} alertTitle={alertTitle} />
-      <AlertTemplate {...props} />
+      <AlertTemplate {...props} icon={fieldIcons[icon as IconTypes]} />
       <Collapse in={isOpen} animateOpacity>
         <Box p="base" bg="lightBlue.1">
           {children}

package/src/helpers/homeAssistant/HomeAssistant.helper.tsx

@@ -1,5 +1,6 @@
 import {
   Fire,
+  GearTime,
   House,
   LargeAppliances,
   Target,
@@ -48,24 +49,24 @@ export const CATEGORY_CONFIG: Record<AlertCategory, CategoryConfigI> = {
     label: 'Protection Monitor',
     color: '#DB1DA1',
     accent: '#FDDDF8',
-    icon: Fire,
+    icon: GearTime,
   },
   maintain: {
     label: 'Maintenance Monitor',
     color: '#8CC421',
     accent: '#B9DEF2',
-    icon: LargeAppliances,
+    icon: GearTime,
   },
   budget: {
     label: 'Budget Monitor',
     color: '#1D8BDB',
     accent: '#B9DEF2',
-    icon: Target,
+    icon: GearTime,
   },
   improve: {
     label: 'Improvement Monitor',
     color: '#8516A7',
     accent: '#B9DEF2',
-    icon: House,
+    icon: GearTime,
   },
 }

package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts

@@ -1,5 +1,6 @@
 import {
   AIGridFieldI,
+  AlertFieldType,
   FolderFileI,
   MenuItemI,
   PartnerFooterI,
@@ -32,6 +33,7 @@ export type KindTypes =
   | 'default'
   | UIKindTypes
   | HomeItemTypes
+  | AlertFieldType
 
 export type UIKindTypes =
   | 'tile-body'

package/src/interfaces/homeAssistant/BackendAlert.interface.ts

@@ -1,18 +1,16 @@
+import { DynamicFormI } from '@/interfaces'
+
 export type AlertCategory = 'safeguard' | 'maintain' | 'budget' | 'improve'
 
 export type AlertTabType = 'details' | 'filter-size' | 'purchase' | 'hire-out'
 
-export interface AlertTab<T = unknown> {
-  key: AlertTabType
-  label: string
-  data: T
-}
+export type AlertFieldType =
+  | 'alertHeader'
+  | 'text'
+  | 'iconSection'
+  | 'tabList'
+  | 'list'
 
-export interface BackendAlertI {
-  id: string
+export interface BackendAlertI extends DynamicFormI {
   category: AlertCategory
-  icon: string
-  title: string
-  summary: string
-  tabs?: AlertTab[]
 }

package/src/mocks/forms/dynamicForm.mock.ts

@@ -853,3 +853,16 @@ export const unknownFormMock: Record<string, any> = {
   updatedAt: '2025-04-17T19:26:39.435Z',
   __v: 0,
 }
+
+export const alertFieldsMock: ReportI[] = [
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Filter',
+    label: 'Time to change your heating & cooling air filter.',
+    description:
+      'Changing your air filter every 30 days ensures efficient system performance and improves indoor air quality by trapping dust and allergens.',
+    icon: 'wind',
+    value: false,
+    type: 'alertHeader',
+  },
+]

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

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/react'
+import { BackendAlert } from '@/components'
+import { BackendAlertI } from '@/interfaces'
+import { alertFieldsMock } from '@/mocks'
+
+export default {
+  title: 'Components/HomeAssistant/MonitorAlerts',
+  component: BackendAlert,
+  args: {
+    category: 'budget',
+    form: alertFieldsMock,
+  },
+} as Meta<BackendAlertI>
+
+export const BackendAlertComponent = (args: BackendAlertI) => {
+  return <BackendAlert {...args} />
+}