@homefile/components-v2 2.17.2 → 2.17.3

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

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

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Flex, Center, Image, Text } from '@chakra-ui/react';
+import { Flex, Center, Image, Text, Box } from '@chakra-ui/react';
 import { Exclamation } from '../../../assets/images';
-export const AlertHeader = () => {
-    return (_jsx(Flex, { justifyContent: "space-between", px: "base", py: "1", bg: "error.2", borderTopRadius: "lg", align: "center", children: _jsxs(Flex, { align: "center", gap: "2", children: [_jsx(Center, { p: "1", borderRadius: "full", bg: "pink.1", h: "18px", w: "18px", children: _jsx(Image, { src: Exclamation, h: "100%", w: "auto" }) }), _jsx(Text, { color: "white", fontSize: "sm", fontWeight: "medium", textTransform: "uppercase", children: t('homeAssistant.monitorAlerts.homeAction') })] }) }));
+export const AlertHeader = ({ bg = 'error.2' }) => {
+    return (_jsx(Flex, { justifyContent: "space-between", px: "base", py: "1", bg: bg, borderTopRadius: "lg", align: "center", children: _jsxs(Flex, { align: "center", gap: "2", children: [_jsxs(Center, { p: "1", position: "relative", h: "18px", w: "18px", 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: "white", fontSize: "sm", fontWeight: "medium", textTransform: "uppercase", children: t('homeAssistant.monitorAlerts.homeAction') })] }) }));
 };

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

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

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

@@ -0,0 +1,7 @@
+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, }) => {
+    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" }));
+};

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

@@ -0,0 +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;

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

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Button, Collapse, Flex, useDisclosure } from '@chakra-ui/react';
+import { AlertHeader, AlertTemplate, AlertTitle } from '../..';
+import { Warranty } from '../../../assets/images';
+export const BackendAlertCard = (_a) => {
+    var { alertBg = 'error.2', alertIcon = Warranty, alertTitle = t('homeAssistant.monitorAlerts.protection'), children } = _a, props = __rest(_a, ["alertBg", "alertIcon", "alertTitle", "children"]);
+    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'}`) }) })] }));
+};

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

@@ -3,6 +3,8 @@ export * from './AlertHeader';
 export * from './AlertTemplate';
 export * from './AlertTitle';
 export * from './BaseAlertCard';
+export * from './BackendAlert';
+export * from './BackendAlertCard';
 export * from './WeatherWidget';
 export * from './HomefileMonitoring';
 export * from './MonitorAlerts';

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

@@ -3,6 +3,8 @@ export * from './AlertHeader';
 export * from './AlertTemplate';
 export * from './AlertTitle';
 export * from './BaseAlertCard';
+export * from './BackendAlert';
+export * from './BackendAlertCard';
 export * from './WeatherWidget';
 export * from './HomefileMonitoring';
 export * from './MonitorAlerts';

package/dist/helpers/homeAssistant/HomeAssistant.helper.d.ts

@@ -1,2 +1,11 @@
 import { HomeAssistantStepI } from '../../interfaces';
+import { AlertCategory } from '../../interfaces/homeAssistant/BackendAlert.interface';
 export declare const homeAssistantSteps: Array<HomeAssistantStepI>;
+interface CategoryConfigI {
+    label: string;
+    icon: string;
+    color: string;
+    accent: string;
+}
+export declare const CATEGORY_CONFIG: Record<AlertCategory, CategoryConfigI>;
+export {};

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

@@ -25,3 +25,29 @@ export const homeAssistantSteps = [
         icon: Water,
     },
 ];
+export const CATEGORY_CONFIG = {
+    safeguard: {
+        label: 'Protection Monitor',
+        color: '#DB1DA1',
+        accent: '#FDDDF8',
+        icon: Fire,
+    },
+    maintain: {
+        label: 'Maintenance Monitor',
+        color: '#8CC421',
+        accent: '#B9DEF2',
+        icon: LargeAppliances,
+    },
+    budget: {
+        label: 'Budget Monitor',
+        color: '#1D8BDB',
+        accent: '#B9DEF2',
+        icon: Target,
+    },
+    improve: {
+        label: 'Improvement Monitor',
+        color: '#8516A7',
+        accent: '#B9DEF2',
+        icon: House,
+    },
+};

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

@@ -0,0 +1,15 @@
+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;
+    category: AlertCategory;
+    icon: string;
+    title: string;
+    summary: string;
+    tabs?: AlertTab[];
+}

package/dist/interfaces/homeAssistant/BackendAlert.interface.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+export interface BackendAlertCardI {
+    alertBg?: string;
+    alertIcon?: string;
+    alertTitle?: string;
+    bg?: string;
+    icon: string;
+    title: string;
+    description: string;
+}

package/dist/interfaces/homeAssistant/BackendAlertCard.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/homeAssistant/index.d.ts

@@ -1,6 +1,8 @@
 export * from './ApplianceButton.interface';
 export * from './ApplianceSteps.interface';
+export * from './BackendAlert.interface';
 export * from './BaseAlertCard.interface';
+export * from './BackendAlertCard.interface';
 export * from './HomeAssistantButton.interface';
 export * from './HomeAssistantPanel.interface';
 export * from './HomeAssistantStepper.interface';

package/dist/interfaces/homeAssistant/index.js

@@ -1,6 +1,8 @@
 export * from './ApplianceButton.interface';
 export * from './ApplianceSteps.interface';
+export * from './BackendAlert.interface';
 export * from './BaseAlertCard.interface';
+export * from './BackendAlertCard.interface';
 export * from './HomeAssistantButton.interface';
 export * from './HomeAssistantPanel.interface';
 export * from './HomeAssistantStepper.interface';

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MonitorAlerts } from '../../../components';
+export default {
+    title: 'Components/HomeAssistant/MonitorAlerts',
+    component: MonitorAlerts,
+    args: {
+        alertId: 'change-air-filter',
+    },
+};
+export const MonitorAlertsComponent = (args) => {
+    return _jsx(MonitorAlerts, Object.assign({}, args));
+};

package/dist/utils/Alerts.utils.d.ts

@@ -0,0 +1,7 @@
+import { AlertCategory } from '../interfaces';
+export declare function getCategoryStyles(cat: AlertCategory): {
+    headerBg: string;
+    alertTitle: string;
+    alertIcon: string;
+    alertIconBg: string;
+};

package/dist/utils/Alerts.utils.js

@@ -0,0 +1,10 @@
+import { CATEGORY_CONFIG } from '../helpers';
+export function getCategoryStyles(cat) {
+    const cfg = CATEGORY_CONFIG[cat];
+    return {
+        headerBg: cfg.color,
+        alertTitle: cfg.label,
+        alertIcon: cfg.icon,
+        alertIconBg: cfg.accent,
+    };
+}

package/package.json

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

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

@@ -1,19 +1,30 @@
 import { t } from 'i18next'
-import { Flex, Center, Image, Text } from '@chakra-ui/react'
+import { Flex, Center, Image, Text, Box } from '@chakra-ui/react'
 import { Exclamation } from '@/assets/images'
 
-export const AlertHeader = () => {
+export const AlertHeader = ({ bg = 'error.2' }) => {
   return (
     <Flex
       justifyContent="space-between"
       px="base"
       py="1"
-      bg="error.2"
+      bg={bg}
       borderTopRadius="lg"
       align="center"
     >
       <Flex align="center" gap="2">
-        <Center p="1" borderRadius="full" bg="pink.1" h="18px" w="18px">
+        <Center p="1" position="relative" h="18px" w="18px">
+          <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

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

@@ -0,0 +1,28 @@
+import { BackendAlertCard } from '@/components'
+import { BackendAlertI } from '@/interfaces'
+import { getCategoryStyles } from '@/utils/Alerts.utils'
+
+export const BackendAlert = ({
+  category,
+  icon,
+  id,
+  title,
+  tabs,
+  summary,
+}: BackendAlertI) => {
+  const { headerBg, alertIcon, alertIconBg, alertTitle } =
+    getCategoryStyles(category)
+  return (
+    <BackendAlertCard
+      alertBg={headerBg}
+      alertIcon={alertIcon}
+      alertTitle={alertTitle}
+      bg={alertIconBg}
+      icon={icon}
+      title={title}
+      description={summary}
+    >
+      content
+    </BackendAlertCard>
+  )
+}

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

@@ -0,0 +1,49 @@
+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 { Warranty } from '@/assets/images'
+
+export const BackendAlertCard = ({
+  alertBg = 'error.2',
+  alertIcon = Warranty,
+  alertTitle = t('homeAssistant.monitorAlerts.protection'),
+  children,
+  ...props
+}: PropsWithChildren<BackendAlertCardI>) => {
+  const { isOpen, onToggle } = useDisclosure()
+  return (
+    <Box
+      display="flex"
+      flexDir="column"
+      bg="neutral.white"
+      boxShadow="lg"
+      borderRadius="lg"
+      overflow="hidden"
+      maxW="420px"
+    >
+      <AlertHeader bg={alertBg} />
+      <AlertTitle alertIcon={alertIcon} alertTitle={alertTitle} />
+      <AlertTemplate {...props} />
+      <Collapse in={isOpen} animateOpacity>
+        <Box p="base" bg="lightBlue.1">
+          {children}
+        </Box>
+      </Collapse>
+      <Flex py="base" bg="lightBlue.1" justify="flex-end">
+        <Button
+          variant="leftRounded"
+          w="fit-content"
+          px="8"
+          fontSize="sm"
+          fontWeight="medium"
+          onClick={onToggle}
+          bg={isOpen ? 'blue.8' : 'blue.2'}
+        >
+          {t(`homeAssistant.monitorAlerts.${isOpen ? 'collapse' : 'review'}`)}
+        </Button>
+      </Flex>
+    </Box>
+  )
+}

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

@@ -3,6 +3,8 @@ export * from './AlertHeader'
 export * from './AlertTemplate'
 export * from './AlertTitle'
 export * from './BaseAlertCard'
+export * from './BackendAlert'
+export * from './BackendAlertCard'
 export * from './WeatherWidget'
 export * from './HomefileMonitoring'
 export * from './MonitorAlerts'

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

@@ -7,6 +7,7 @@ import {
   Water,
 } from '@/assets/images'
 import { HomeAssistantStepI } from '@/interfaces'
+import { AlertCategory } from '@/interfaces/homeAssistant/BackendAlert.interface'
 
 export const homeAssistantSteps: Array<HomeAssistantStepI> = [
   {
@@ -34,3 +35,37 @@ export const homeAssistantSteps: Array<HomeAssistantStepI> = [
     icon: Water,
   },
 ]
+
+interface CategoryConfigI {
+  label: string
+  icon: string
+  color: string
+  accent: string
+}
+
+export const CATEGORY_CONFIG: Record<AlertCategory, CategoryConfigI> = {
+  safeguard: {
+    label: 'Protection Monitor',
+    color: '#DB1DA1',
+    accent: '#FDDDF8',
+    icon: Fire,
+  },
+  maintain: {
+    label: 'Maintenance Monitor',
+    color: '#8CC421',
+    accent: '#B9DEF2',
+    icon: LargeAppliances,
+  },
+  budget: {
+    label: 'Budget Monitor',
+    color: '#1D8BDB',
+    accent: '#B9DEF2',
+    icon: Target,
+  },
+  improve: {
+    label: 'Improvement Monitor',
+    color: '#8516A7',
+    accent: '#B9DEF2',
+    icon: House,
+  },
+}

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

@@ -0,0 +1,18 @@
+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
+  category: AlertCategory
+  icon: string
+  title: string
+  summary: string
+  tabs?: AlertTab[]
+}

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

@@ -0,0 +1,9 @@
+export interface BackendAlertCardI {
+  alertBg?: string
+  alertIcon?: string
+  alertTitle?: string
+  bg?: string
+  icon: string
+  title: string
+  description: string
+}

package/src/interfaces/homeAssistant/index.ts

@@ -1,6 +1,8 @@
 export * from './ApplianceButton.interface'
 export * from './ApplianceSteps.interface'
+export * from './BackendAlert.interface'
 export * from './BaseAlertCard.interface'
+export * from './BackendAlertCard.interface'
 export * from './HomeAssistantButton.interface'
 export * from './HomeAssistantPanel.interface'
 export * from './HomeAssistantStepper.interface'

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

@@ -0,0 +1,15 @@
+import { Meta } from '@storybook/react'
+import { MonitorAlerts } from '@/components'
+import { MonitorAlertsI } from '@/interfaces'
+
+export default {
+  title: 'Components/HomeAssistant/MonitorAlerts',
+  component: MonitorAlerts,
+  args: {
+    alertId: 'change-air-filter',
+  },
+} as Meta<MonitorAlertsI>
+
+export const MonitorAlertsComponent = (args: MonitorAlertsI) => {
+  return <MonitorAlerts {...args} />
+}

package/src/utils/Alerts.utils.ts

@@ -0,0 +1,12 @@
+import { CATEGORY_CONFIG } from '@/helpers'
+import { AlertCategory } from '@/interfaces'
+
+export function getCategoryStyles(cat: AlertCategory) {
+  const cfg = CATEGORY_CONFIG[cat]
+  return {
+    headerBg: cfg.color,
+    alertTitle: cfg.label,
+    alertIcon: cfg.icon,
+    alertIconBg: cfg.accent,
+  }
+}