@homefile/components-v2 2.17.4 → 2.18.0

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

@@ -1,9 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BackendAlertCard } from '../..';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertFields, BackendAlertCard, TabsHeader } from '../..';
 import { getCategoryStyles } from '../../../utils/Alerts.utils';
+import { Divider } from '@chakra-ui/react';
 export const BackendAlert = ({ category, form }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const { headerBg, alertIcon, alertIconBg, alertTitle } = getCategoryStyles(category);
-    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" }));
+    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) => {
+        var _a;
+        return ({
+            label: tab.name,
+            component: _jsx(AlertFields, { fields: (_a = tab.children) !== null && _a !== void 0 ? _a : [] }),
+        });
+    })) !== 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 })] }));
 };

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

@@ -18,5 +18,5 @@ import { fieldIcons } from '../../../helpers';
 export const BackendAlertCard = (_a) => {
     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, { 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'}`) }) })] }));
+    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, { 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/components/homeAssistant/monitorAlerts/alertDetails/AlertFields.d.ts

@@ -0,0 +1,2 @@
+import { FieldTypesI } from '../../../../interfaces';
+export declare const AlertFields: ({ fields }: FieldTypesI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/monitorAlerts/alertDetails/AlertFields.js

@@ -0,0 +1,17 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack, Text } from '@chakra-ui/react';
+import { VideoDetail } from './VideoDetail';
+export const AlertFields = ({ fields }) => {
+    return (_jsx(Stack, { spacing: "base", p: "base", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
+            const { id, type, value } = field;
+            switch (type) {
+                case 'text':
+                    return (_jsx(Text, { fontSize: "sm", fontFamily: "secondary", lineHeight: "1.2", whiteSpace: "pre-line", children: String(value) }, id));
+                case 'video':
+                    return _createElement(VideoDetail, Object.assign({}, field, { key: id }));
+                default:
+                    return null;
+            }
+        }) }));
+};

package/dist/components/homeAssistant/monitorAlerts/alertDetails/VideoDetail.d.ts

@@ -0,0 +1,2 @@
+import { ReportI } from '../../../../interfaces';
+export declare const VideoDetail: ({ name, label, link, description }: ReportI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/monitorAlerts/alertDetails/VideoDetail.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AspectRatio, Box, Container, Flex, Text } from '@chakra-ui/react';
+export const VideoDetail = ({ name, label, link, description }) => {
+    return (_jsx(Container, { p: "base", children: _jsxs(Flex, { gap: "base", children: [_jsx(AspectRatio, { w: "140px", ratio: 16 / 9, children: _jsx("iframe", { title: name, src: link, allowFullScreen: true }) }), _jsxs(Box, { children: [_jsx(Text, { fontWeight: "semibold", children: name }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", children: `${label} | ${description}` })] })] }) }));
+};

package/dist/components/homeAssistant/monitorAlerts/alertDetails/index.d.ts

@@ -1,4 +1,6 @@
+export * from './AlertFields';
 export * from './ChangeAirFilter';
 export * from './CustomDivider';
 export * from './SmokeDetectorBattery';
 export * from './SmokeDetectorExpired';
+export * from './VideoDetail';

package/dist/components/homeAssistant/monitorAlerts/alertDetails/index.js

@@ -1,4 +1,6 @@
+export * from './AlertFields';
 export * from './ChangeAirFilter';
 export * from './CustomDivider';
 export * from './SmokeDetectorBattery';
 export * from './SmokeDetectorExpired';
+export * from './VideoDetail';

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

@@ -1,5 +1,5 @@
-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;
+import { AIGridFieldI, AlertFieldType, AlertTabType, 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' | 'video' | UIKindTypes | HomeItemTypes | AlertTabType | 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/headers/TabsHeader.interface.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-interface Tab {
+export interface TabI {
     label: string;
     component: ReactNode | null;
 }
@@ -7,8 +7,7 @@ export interface TabsHeaderI {
     defaultIndex?: number;
     onChange?: (index: number) => void;
     rightButton?: ReactNode;
-    rightTabList?: Tab[];
+    rightTabList?: TabI[];
     tabIndex?: number;
-    tabList: Tab[];
+    tabList: TabI[];
 }
-export {};

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

@@ -1,7 +1,7 @@
 import { DynamicFormI } from '..';
 export type AlertCategory = 'safeguard' | 'maintain' | 'budget' | 'improve';
 export type AlertTabType = 'details' | 'filter-size' | 'purchase' | 'hire-out';
-export type AlertFieldType = 'alertHeader' | 'text' | 'iconSection' | 'tabList' | 'list';
+export type AlertFieldType = 'alert' | 'iconSection' | 'tabList' | 'list';
 export interface BackendAlertI extends DynamicFormI {
     category: AlertCategory;
 }

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

@@ -847,6 +847,51 @@ export const alertFieldsMock = [
         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',
+        type: 'alert',
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Details',
+                label: 'Model or Serial',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: '',
+                type: 'details',
+                visible: true,
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        label: '',
+                        description: '',
+                        comments: '',
+                        value: 'Changing your air filter is critical for maintaining your home’s HVAC system efficiency and ensuring good air quality. A clogged filter forces your system to work harder, leading to higher energy bills and potential damage to components. \n\nNeglecting this simple maintenance can result in costly repairs or even a full system replacement, which can run into thousands of dollars. Regularly replacing your air filter not only saves money but also extends the lifespan of your HVAC system, keeping your home comfortable and your expenses in check.',
+                        type: 'text',
+                        visible: true,
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Where to find and change the Air Filter',
+                        label: 'Dec 5, 2024',
+                        description: '1:39',
+                        comments: '',
+                        value: '',
+                        link: 'https://www.youtube.com/embed/qCNIc1y18pA?si=oC1NmAjuh0JZTYcr',
+                        type: 'video',
+                        visible: true,
+                    },
+                ],
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Filter Size',
+                label: 'Upload Image',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: faker.image.urlPicsumPhotos(),
+                type: 'filter-size',
+                visible: true,
+            },
+        ],
     },
 ];

package/package.json

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

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

@@ -1,22 +1,34 @@
-import { BackendAlertCard } from '@/components'
-import { BackendAlertI } from '@/interfaces'
+import { AlertFields, BackendAlertCard, TabsHeader } from '@/components'
+import { BackendAlertI, TabI } from '@/interfaces'
 import { getCategoryStyles } from '@/utils/Alerts.utils'
+import { Divider } from '@chakra-ui/react'
 
 export const BackendAlert = ({ category, form }: BackendAlertI) => {
   const { headerBg, alertIcon, alertIconBg, alertTitle } =
     getCategoryStyles(category)
-  const alertHeader = form?.find((item) => item.type === 'alertHeader')
+  const alert = form?.find((item) => item.type === 'alert')
+
+  const tabs =
+    alert?.children?.map(
+      (tab) =>
+        ({
+          label: tab.name,
+          component: <AlertFields fields={tab.children ?? []} />,
+        } as TabI)
+    ) ?? []
+
   return (
     <BackendAlertCard
       alertBg={headerBg}
       alertIcon={alertIcon}
       alertTitle={alertTitle}
       bg={alertIconBg}
-      icon={alertHeader?.icon ?? ''}
-      title={alertHeader?.label ?? ''}
-      description={alertHeader?.description ?? ''}
+      icon={alert?.icon ?? ''}
+      title={alert?.label ?? ''}
+      description={alert?.description ?? ''}
     >
-      content
+      <Divider />
+      <TabsHeader tabList={tabs} />
     </BackendAlertCard>
   )
 }

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

@@ -29,9 +29,7 @@ export const BackendAlertCard = ({
       <AlertTitle alertIcon={alertIcon} alertTitle={alertTitle} />
       <AlertTemplate {...props} icon={fieldIcons[icon as IconTypes]} />
       <Collapse in={isOpen} animateOpacity>
-        <Box p="base" bg="lightBlue.1">
-          {children}
-        </Box>
+        <Box bg="lightBlue.1">{children}</Box>
       </Collapse>
       <Flex py="base" bg="lightBlue.1" justify="flex-end">
         <Button

package/src/components/homeAssistant/monitorAlerts/alertDetails/AlertFields.tsx

@@ -0,0 +1,31 @@
+import { FieldTypesI } from '@/interfaces'
+import { Box, Stack, Text } from '@chakra-ui/react'
+import { VideoDetail } from './VideoDetail'
+
+export const AlertFields = ({ fields }: FieldTypesI) => {
+  return (
+    <Stack spacing="base" p="base">
+      {fields?.map((field) => {
+        const { id, type, value } = field
+        switch (type) {
+          case 'text':
+            return (
+              <Text
+                key={id}
+                fontSize="sm"
+                fontFamily="secondary"
+                lineHeight="1.2"
+                whiteSpace="pre-line"
+              >
+                {String(value)}
+              </Text>
+            )
+          case 'video':
+            return <VideoDetail {...field} key={id} />
+          default:
+            return null
+        }
+      })}
+    </Stack>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/alertDetails/VideoDetail.tsx

@@ -0,0 +1,20 @@
+import { ReportI } from '@/interfaces'
+import { AspectRatio, Box, Container, Flex, Text } from '@chakra-ui/react'
+
+export const VideoDetail = ({ name, label, link, description }: ReportI) => {
+  return (
+    <Container p="base">
+      <Flex gap="base">
+        <AspectRatio w="140px" ratio={16 / 9}>
+          <iframe title={name} src={link} allowFullScreen />
+        </AspectRatio>
+        <Box>
+          <Text fontWeight="semibold">{name}</Text>
+          <Text fontSize="sm" fontFamily="secondary">
+            {`${label} | ${description}`}
+          </Text>
+        </Box>
+      </Flex>
+    </Container>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/alertDetails/index.ts

@@ -1,4 +1,6 @@
+export * from './AlertFields'
 export * from './ChangeAirFilter'
 export * from './CustomDivider'
 export * from './SmokeDetectorBattery'
 export * from './SmokeDetectorExpired'
+export * from './VideoDetail'

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

@@ -1,6 +1,7 @@
 import {
   AIGridFieldI,
   AlertFieldType,
+  AlertTabType,
   FolderFileI,
   MenuItemI,
   PartnerFooterI,
@@ -31,8 +32,10 @@ export type KindTypes =
   | 'text'
   | 'textarea'
   | 'default'
+  | 'video'
   | UIKindTypes
   | HomeItemTypes
+  | AlertTabType
   | AlertFieldType
 
 export type UIKindTypes =

package/src/interfaces/headers/TabsHeader.interface.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 
-interface Tab {
+export interface TabI {
   label: string
   component: ReactNode | null
 }
@@ -8,7 +8,7 @@ export interface TabsHeaderI {
   defaultIndex?: number
   onChange?: (index: number) => void
   rightButton?: ReactNode
-  rightTabList?: Tab[]
+  rightTabList?: TabI[]
   tabIndex?: number
-  tabList: Tab[]
+  tabList: TabI[]
 }

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

@@ -4,12 +4,7 @@ export type AlertCategory = 'safeguard' | 'maintain' | 'budget' | 'improve'
 
 export type AlertTabType = 'details' | 'filter-size' | 'purchase' | 'hire-out'
 
-export type AlertFieldType =
-  | 'alertHeader'
-  | 'text'
-  | 'iconSection'
-  | 'tabList'
-  | 'list'
+export type AlertFieldType = 'alert' | 'iconSection' | 'tabList' | 'list'
 
 export interface BackendAlertI extends DynamicFormI {
   category: AlertCategory

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

@@ -863,6 +863,52 @@ export const alertFieldsMock: ReportI[] = [
       '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',
+    type: 'alert',
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Details',
+        label: 'Model or Serial',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'details',
+        visible: true,
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            label: '',
+            description: '',
+            comments: '',
+            value:
+              'Changing your air filter is critical for maintaining your home’s HVAC system efficiency and ensuring good air quality. A clogged filter forces your system to work harder, leading to higher energy bills and potential damage to components. \n\nNeglecting this simple maintenance can result in costly repairs or even a full system replacement, which can run into thousands of dollars. Regularly replacing your air filter not only saves money but also extends the lifespan of your HVAC system, keeping your home comfortable and your expenses in check.',
+            type: 'text',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Where to find and change the Air Filter',
+            label: 'Dec 5, 2024',
+            description: '1:39',
+            comments: '',
+            value: '',
+            link: 'https://www.youtube.com/embed/qCNIc1y18pA?si=oC1NmAjuh0JZTYcr',
+            type: 'video',
+            visible: true,
+          },
+        ],
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Filter Size',
+        label: 'Upload Image',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: faker.image.urlPicsumPhotos(),
+        type: 'filter-size',
+        visible: true,
+      },
+    ],
   },
 ]