@homefile/components-v2 2.17.0 → 2.17.2

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

@@ -1,2 +1,2 @@
 import { HomeMonitorButtonI } from '../../interfaces';
-export declare const HomeMonitorButton: ({ currentStep, onStepClick, status, step, }: HomeMonitorButtonI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeMonitorButton: ({ alertCount, currentStep, onStepClick, status, step, }: HomeMonitorButtonI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeMonitorButton.js

@@ -1,26 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Center, Image, Stack, Text } from '@chakra-ui/react';
 import { getIconAltText } from '../../utils';
-export const HomeMonitorButton = ({ currentStep, onStepClick, status = 'ok', step, }) => {
+import { keyframes } from '@emotion/react';
+export const HomeMonitorButton = ({ alertCount = 0, currentStep, onStepClick, status = 'ok', step, }) => {
     const buttonId = `homeMonitorButton-${currentStep}`;
     const iconAltText = getIconAltText(step.icon);
-    return (_jsx(Box, { position: "relative", id: buttonId, zIndex: "2", children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", boxShadow: "lg", zIndex: "2", children: [_jsx(Box, { bg: status === 'alert' ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "6px", left: "6px", zIndex: "8" }), _jsxs(Stack, Object.assign({ position: "relative", zIndex: "2", as: "button", spacing: "2", border: "1px solid transparent", align: "center", h: "96px", w: "100%", p: "base" }, setStyles(status), { onClick: () => onStepClick(currentStep), children: [_jsx(Center, { h: "60%", marginTop: "2", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "28px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }) }));
+    const alert = status === 'alert';
+    const ok = status === 'ok';
+    return (_jsx(Box, Object.assign({ position: "relative", id: buttonId, zIndex: "2", boxShadow: "lg" }, setStyles(status), { children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", zIndex: "2", children: [_jsx(Box, { bg: alert ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "6px", left: "6px", zIndex: "8" }), _jsxs(Stack, { position: "relative", zIndex: "2", as: "button", spacing: "2", border: "1px solid transparent", align: "center", h: "96px", w: "100%", p: "base", onClick: () => onStepClick(currentStep), filter: ok ? 'grayscale(1) opacity(0.6)' : '', children: [_jsxs(Center, { h: "60%", marginTop: "2", children: [!alert && (_jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "28px" })), alert && (_jsx(Center, { boxSize: "32px", bg: "error.2", borderRadius: "full", color: "neutral.white", lineHeight: "1", fontWeight: "bold", children: alertCount }))] }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] })] }) })));
 };
+const alertGradient = keyframes `
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+`;
 const setStyles = (status) => {
     switch (status) {
         case 'alert':
             return {
+                background: 'white',
                 cursor: 'pointer',
-                border: '1px solid',
-                borderColor: 'error.2',
                 transition: 'all 0.3s',
+                borderRadius: 'lg',
+                border: 'none',
+                _before: {
+                    content: '""',
+                    position: 'absolute',
+                    inset: '-2px',
+                    borderRadius: 'inherit',
+                    background: 'linear-gradient(270deg,rgb(123, 6, 105),rgb(233, 175, 236), #F544DA)',
+                    backgroundSize: '400% 400%',
+                    animation: `${alertGradient} 2s linear infinite`,
+                    animationDirection: 'alternate',
+                    zIndex: -1,
+                    pointerEvents: 'none',
+                },
                 _hover: {
                     bg: 'lightGreen.7',
                 },
             };
         case 'ok':
             return {
-                filter: 'grayscale(1) opacity(0.6)',
+                bg: 'neutral.white',
+                borderRadius: 'lg',
             };
     }
 };

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

@@ -1,2 +1,2 @@
 import { HomeMonitortStepsI } from '../../interfaces';
-export declare const HomeMonitorSteps: ({ menuItems, onStepClick, stepsWithAlerts, }: HomeMonitortStepsI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeMonitorSteps: ({ alerts, menuItems, onStepClick, stepsWithAlerts, }: HomeMonitortStepsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeMonitorSteps.js

@@ -4,13 +4,17 @@ import { Box, Flex } from '@chakra-ui/react';
 import { HomeMonitorButton, IconMenu, MoreHorizontal } from '..';
 import { homeAssistantSteps } from '../../helpers';
 import { homeAssistantProxy } from '../../proxies';
-export const HomeMonitorSteps = ({ menuItems = [], onStepClick, stepsWithAlerts, }) => {
+export const HomeMonitorSteps = ({ alerts = [], menuItems = [], onStepClick, stepsWithAlerts = [], }) => {
     const { setSelectedId } = homeAssistantProxy;
     const isDisabled = menuItems.length === 0;
     const handleStepClick = (step) => onStepClick(step);
-    return (_jsx(Flex, { gap: "base", justify: "center", children: homeAssistantSteps.map((step, index) => (_jsx(Box, { position: "relative", flex: "1", children: _jsxs(Fragment, { children: [_jsx(HomeMonitorButton, { currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, stepsWithAlerts), step: step }), _jsx(Box, { position: "absolute", top: "-2px", right: "4px", zIndex: "1400", children: _jsx(IconMenu, { zIndex: "2", icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId(`homeMonitorButton-${index + 1}`) }) })] }) }, step === null || step === void 0 ? void 0 : step.title))) }));
+    return (_jsx(Flex, { gap: "base", justify: "center", children: homeAssistantSteps.map((step, index) => {
+            var _a;
+            return (_jsx(Box, { position: "relative", flex: "1", children: _jsxs(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, stepsWithAlerts, alerts), step: step }), _jsx(Box, { position: "absolute", top: "-2px", right: "4px", zIndex: "1400", children: _jsx(IconMenu, { zIndex: "2", icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId(`homeMonitorButton-${index + 1}`) }) })] }) }, step === null || step === void 0 ? void 0 : step.title));
+        }) }));
 };
-const getStatus = (index, stepsWithAlerts) => {
-    const hasAlert = stepsWithAlerts.includes(index);
+const getStatus = (index, stepsWithAlerts, alerts) => {
+    const hasAlert = (stepsWithAlerts === null || stepsWithAlerts === void 0 ? void 0 : stepsWithAlerts.includes(index)) ||
+        (alerts === null || alerts === void 0 ? void 0 : alerts.some((alert) => alert.step === index));
     return hasAlert ? 'alert' : 'ok';
 };

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

@@ -1,12 +1,19 @@
 import { HomeAssistantStepI, MenuItemI } from '..';
+interface AlertI {
+    step: number;
+    count: number;
+}
 export interface HomeMonitortStepsI {
+    alerts?: AlertI[];
     menuItems: MenuItemI[];
-    stepsWithAlerts: number[];
+    stepsWithAlerts?: number[];
     onStepClick: (step: number) => void;
 }
 export interface HomeMonitorButtonI {
+    alertCount?: number;
     currentStep: number;
     onStepClick: HomeMonitortStepsI['onStepClick'];
     status: 'alert' | 'ok';
     step: HomeAssistantStepI;
 }
+export {};

package/dist/stories/homeAssistant/HomeMonitorSteps.stories.d.ts

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

package/dist/stories/homeAssistant/HomeMonitorSteps.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HomeMonitorSteps } from '../../components';
+import { Box } from '@chakra-ui/react';
+import { action } from '@storybook/addon-actions';
+import { menuMock } from '../../mocks';
+export default {
+    title: 'Components/HomeAssistant',
+    component: HomeMonitorSteps,
+    args: {
+        alerts: [
+            { step: 2, count: 3 },
+            { step: 1, count: 2 },
+            { step: 6, count: 2 },
+        ],
+        menuItems: menuMock,
+        onStepClick: action('onStepClick'),
+    },
+    decorators: [
+        (Story) => (_jsx(Box, { p: "base", w: ['full', '800px'], h: "fit-content", children: _jsx(Story, {}) })),
+    ],
+};
+export const HomeMonitorStepsComponent = (args) => {
+    return _jsx(HomeMonitorSteps, Object.assign({}, args));
+};

package/dist/stories/homeBoard/AddToHomefile.stories.d.ts

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

package/dist/stories/homeBoard/AddToHomefile.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+import { AddToHomefile } from '../../components';
+import { action } from '@storybook/addon-actions';
+export default {
+    title: 'Components/HomeBoard',
+    component: AddToHomefile,
+    args: {
+        onItemClick: action('onItemClick'),
+        documentList: [],
+    },
+};
+export const AddToHomefileComponent = (args) => {
+    return (_jsx(Box, { w: ['full', '300px'], children: _jsx(AddToHomefile, Object.assign({}, args)) }));
+};

package/package.json

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

package/src/components/homeAssistant/HomeMonitorButton.tsx

@@ -1,8 +1,10 @@
 import { Box, Center, Image, Stack, Text } from '@chakra-ui/react'
 import { HomeMonitorButtonI } from '@/interfaces'
 import { getIconAltText } from '@/utils'
+import { keyframes } from '@emotion/react'
 
 export const HomeMonitorButton = ({
+  alertCount = 0,
   currentStep,
   onStepClick,
   status = 'ok',
@@ -10,18 +12,20 @@ export const HomeMonitorButton = ({
 }: HomeMonitorButtonI) => {
   const buttonId = `homeMonitorButton-${currentStep}`
   const iconAltText = getIconAltText(step.icon)
+  const alert = status === 'alert'
+  const ok = status === 'ok'
 
   return (
-    <Box position="relative" id={buttonId} zIndex="2">
-      <Box
-        position="relative"
-        bg="neutral.white"
-        borderRadius="lg"
-        boxShadow="lg"
-        zIndex="2"
-      >
+    <Box
+      position="relative"
+      id={buttonId}
+      zIndex="2"
+      boxShadow="lg"
+      {...setStyles(status)}
+    >
+      <Box position="relative" bg="neutral.white" borderRadius="lg" zIndex="2">
         <Box
-          bg={status === 'alert' ? 'error.2' : 'green.1'}
+          bg={alert ? 'error.2' : 'green.1'}
           boxSize="10px"
           borderRadius="full"
           position="absolute"
@@ -40,11 +44,25 @@ export const HomeMonitorButton = ({
           h="96px"
           w="100%"
           p="base"
-          {...setStyles(status)}
           onClick={() => onStepClick(currentStep)}
+          filter={ok ? 'grayscale(1) opacity(0.6)' : ''}
         >
           <Center h="60%" marginTop="2">
-            <Image src={step.icon} alt={iconAltText} w="auto" h="28px" />
+            {!alert && (
+              <Image src={step.icon} alt={iconAltText} w="auto" h="28px" />
+            )}
+            {alert && (
+              <Center
+                boxSize="32px"
+                bg="error.2"
+                borderRadius="full"
+                color="neutral.white"
+                lineHeight="1"
+                fontWeight="bold"
+              >
+                {alertCount}
+              </Center>
+            )}
           </Center>
           <Center h="40%">
             <Text
@@ -62,21 +80,45 @@ export const HomeMonitorButton = ({
   )
 }
 
+const alertGradient = keyframes`
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+`
+
 const setStyles = (status: HomeMonitorButtonI['status']) => {
   switch (status) {
     case 'alert':
       return {
+        background: 'white',
         cursor: 'pointer',
-        border: '1px solid',
-        borderColor: 'error.2',
         transition: 'all 0.3s',
+        borderRadius: 'lg',
+        border: 'none',
+        _before: {
+          content: '""',
+          position: 'absolute',
+          inset: '-2px',
+          borderRadius: 'inherit',
+          background:
+            'linear-gradient(270deg,rgb(123, 6, 105),rgb(233, 175, 236), #F544DA)',
+          backgroundSize: '400% 400%',
+          animation: `${alertGradient} 2s linear infinite`,
+          animationDirection: 'alternate',
+          zIndex: -1,
+          pointerEvents: 'none',
+        },
         _hover: {
           bg: 'lightGreen.7',
         },
       }
     case 'ok':
       return {
-        filter: 'grayscale(1) opacity(0.6)',
+        bg: 'neutral.white',
+        borderRadius: 'lg',
       }
   }
 }

package/src/components/homeAssistant/HomeMonitorSteps.tsx

@@ -6,9 +6,10 @@ import { homeAssistantSteps } from '@/helpers'
 import { homeAssistantProxy } from '@/proxies'
 
 export const HomeMonitorSteps = ({
+  alerts = [],
   menuItems = [],
   onStepClick,
-  stepsWithAlerts,
+  stepsWithAlerts = [],
 }: HomeMonitortStepsI) => {
   const { setSelectedId } = homeAssistantProxy
 
@@ -21,9 +22,12 @@ export const HomeMonitorSteps = ({
         <Box key={step?.title} position="relative" flex="1">
           <Fragment>
             <HomeMonitorButton
+              alertCount={
+                alerts.find((alert) => alert.step === index + 1)?.count
+              }
               currentStep={index + 1}
               onStepClick={handleStepClick}
-              status={getStatus(index + 1, stepsWithAlerts)}
+              status={getStatus(index + 1, stepsWithAlerts, alerts)}
               step={step}
             />
             <Box position="absolute" top="-2px" right="4px" zIndex="1400">
@@ -43,7 +47,13 @@ export const HomeMonitorSteps = ({
   )
 }
 
-const getStatus = (index: number, stepsWithAlerts: number[]) => {
-  const hasAlert = stepsWithAlerts.includes(index)
+const getStatus = (
+  index: number,
+  stepsWithAlerts: number[],
+  alerts: HomeMonitortStepsI['alerts']
+) => {
+  const hasAlert =
+    stepsWithAlerts?.includes(index) ||
+    alerts?.some((alert) => alert.step === index)
   return hasAlert ? 'alert' : 'ok'
 }

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

@@ -1,12 +1,19 @@
 import { HomeAssistantStepI, MenuItemI } from '@/interfaces'
 
+interface AlertI {
+  step: number
+  count: number
+}
+
 export interface HomeMonitortStepsI {
+  alerts?: AlertI[]
   menuItems: MenuItemI[]
-  stepsWithAlerts: number[]
+  stepsWithAlerts?: number[]
   onStepClick: (step: number) => void
 }
 
 export interface HomeMonitorButtonI {
+  alertCount?: number
   currentStep: number
   onStepClick: HomeMonitortStepsI['onStepClick']
   status: 'alert' | 'ok'

package/src/stories/homeAssistant/HomeMonitorSteps.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/react'
+import { HomeMonitorSteps } from '@/components'
+import { Box } from '@chakra-ui/react'
+import { action } from '@storybook/addon-actions'
+import { menuMock } from '@/mocks'
+import { HomeMonitortStepsI } from '@/interfaces'
+
+export default {
+  title: 'Components/HomeAssistant',
+  component: HomeMonitorSteps,
+  args: {
+    alerts: [
+      { step: 2, count: 3 },
+      { step: 1, count: 2 },
+      { step: 6, count: 2 },
+    ],
+    menuItems: menuMock,
+    onStepClick: action('onStepClick'),
+  },
+  decorators: [
+    (Story: any) => (
+      <Box p="base" w={['full', '800px']} h="fit-content">
+        <Story />
+      </Box>
+    ),
+  ],
+} as Meta<HomeMonitortStepsI>
+
+export const HomeMonitorStepsComponent = (args: HomeMonitortStepsI) => {
+  return <HomeMonitorSteps {...args} />
+}

package/src/stories/homeBoard/AddToHomefile.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { AddToHomefile } from '@/components'
+import { AddToHomefileI } from '@/interfaces'
+import { action } from '@storybook/addon-actions'
+
+export default {
+  title: 'Components/HomeBoard',
+  component: AddToHomefile,
+  args: {
+    onItemClick: action('onItemClick'),
+    documentList: [],
+  },
+} as Meta<AddToHomefileI>
+
+export const AddToHomefileComponent = (args: AddToHomefileI) => {
+  return (
+    <Box w={['full', '300px']}>
+      <AddToHomefile {...args} />
+    </Box>
+  )
+}