@homefile/components-v2 1.0.11 → 1.0.13

package/dist/components/homeAssistant/HomeAssistantStepper.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Flex, Stack, Text } from '@chakra-ui/react';
 export const HomeAssistantStepper = ({ currentStep, totalSteps, }) => {
-    return (_jsx(Flex, { gap: "1px", w: "100%", children: Array.from({ length: totalSteps }).map((_, index) => {
+    return (_jsx(Flex, { gap: "1px", w: "100%", zIndex: "2", children: Array.from({ length: totalSteps }).map((_, index) => {
             return (_jsxs(Stack, { flex: "1", spacing: "1", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "xs", textTransform: "uppercase", color: setTextColor(index + 1, currentStep), textAlign: "center", children: `${currentStep} ${t('addItemWizard.of')} ${totalSteps}` }), _jsx(Box, { h: "16px", bg: setBgColor(index + 1, currentStep) })] }, index));
         }) }));
 };

package/dist/components/homeAssistant/HomeAssistantSteps.js

@@ -4,7 +4,6 @@ import { HomeAssistantButton, HomeAssistantStepper } from '..';
 import { homeAssistantSteps } from '../../helpers';
 import { useComponentStyles } from '../../hooks';
 export const HomeAssistantSteps = ({ currentStep, onStepClick, currentPanel, }) => {
-    const wrapperZIndex = currentPanel ? undefined : '2';
     const stepId = `homeAssistantButton-${currentPanel}`;
     const componentIds = currentPanel
         ? [
@@ -16,8 +15,8 @@ export const HomeAssistantSteps = ({ currentStep, onStepClick, currentPanel, })
             'homeAssistantButton-6',
         ]
         : [];
-    useComponentStyles(componentIds, stepId);
-    return (_jsxs(Stack, { spacing: "8", w: "fit-content", position: "relative", top: ['-10px', '-30px'], zIndex: wrapperZIndex, children: [_jsx(HomeAssistantStepper, { currentStep: currentStep, totalSteps: 6 }), _jsx(SimpleGrid, { columns: [2, 3], spacing: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Center, { w: "100%", children: _jsx(HomeAssistantButton, { currentStep: index + 1, onStepClick: onStepClick, status: getStatus(index + 1, currentStep), step: step }) }, step.title))) })] }));
+    useComponentStyles({ ids: componentIds, selectedId: stepId, zIndex: '2' });
+    return (_jsxs(Stack, { spacing: "8", w: "fit-content", position: "relative", top: ['-10px', '-30px'], children: [_jsx(HomeAssistantStepper, { currentStep: currentStep, totalSteps: 6 }), _jsx(SimpleGrid, { columns: [2, 3], spacing: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Center, { w: "100%", children: _jsx(HomeAssistantButton, { currentStep: index + 1, onStepClick: onStepClick, status: getStatus(index + 1, currentStep), step: step }) }, step.title))) })] }));
 };
 const getStatus = (index, currentStep) => {
     if (index === currentStep)

package/dist/components/homeAssistant/panel/ApplianceSteps.js

@@ -3,68 +3,69 @@ import { t } from 'i18next';
 import { Center, SimpleGrid, Stack, Text } from '@chakra-ui/react';
 import { ApplianceButton } from '../..';
 import { Fridge, Freezer, Washer, Dryer, Dishwasher, CookTop, Oven, Hood, Microwave, Range, } from '../../../assets/images';
+import { useState } from 'react';
 export const ApplianceSteps = ({ onClick }) => {
-    return (_jsxs(Stack, { spacing: "base", bg: "lightBlue.2", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: t('homeAssistant.selectAppliances') }), _jsx(SimpleGrid, { columns: [4, 5], spacing: "base", children: steps.map((step) => (_jsx(Center, { w: "100%", children: _jsx(ApplianceButton, { onClick: onClick, step: step }) }, step.id))) })] }));
+    const [appliances, setAppliances] = useState([]);
+    const handleClick = (id) => {
+        if (appliances.includes(id)) {
+            const newAppliances = appliances.filter((appliance) => appliance !== id);
+            onClick(newAppliances);
+            return setAppliances(newAppliances);
+        }
+        setAppliances([...appliances, id]);
+        onClick([...appliances, id]);
+    };
+    return (_jsxs(Stack, { spacing: "base", bg: "lightBlue.2", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: t('homeAssistant.selectAppliances') }), _jsx(SimpleGrid, { columns: [4, 5], spacing: "base", children: steps.map((step) => (_jsx(Center, { w: "100%", children: _jsx(ApplianceButton, { onClick: handleClick, step: Object.assign(Object.assign({}, step), { isCompleted: appliances.includes(step.id) }) }) }, step.id))) })] }));
 };
 export const steps = [
     {
         id: 'fridge',
         title: 'fridge',
         icon: Fridge,
-        isCompleted: true,
     },
     {
         id: 'freezer',
         title: 'freezer',
         icon: Freezer,
-        isCompleted: false,
     },
     {
         id: 'washer',
         title: 'washer',
         icon: Washer,
-        isCompleted: false,
     },
     {
         id: 'dryer',
         title: 'Dryer',
         icon: Dryer,
-        isCompleted: false,
     },
     {
         id: 'dish-washer',
         title: 'Dish Washer',
         icon: Dishwasher,
-        isCompleted: false,
     },
     {
         id: 'cook-top',
         title: 'Cook Top',
         icon: CookTop,
-        isCompleted: false,
     },
     {
         id: 'oven',
         title: 'oven',
         icon: Oven,
-        isCompleted: false,
     },
     {
         id: 'range',
         title: 'range',
         icon: Range,
-        isCompleted: false,
     },
     {
         id: 'hood',
         title: 'hood',
         icon: Hood,
-        isCompleted: false,
     },
     {
         id: 'microwave',
         title: 'microwave',
         icon: Microwave,
-        isCompleted: false,
     },
 ];

package/dist/components/tour/HomeBoardTour.js

@@ -22,7 +22,7 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
         'addCatalog',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles(componentIds, currentStep);
+    useComponentStyles({ ids: componentIds, selectedId: currentStep });
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const parsedBubbleWidth = Number(bubbleWidth.replace('px', ''));
     const panelBubbleArrowSize = 500 + parsedBubbleWidth + arrowSize;

package/dist/components/tour/LaunchpadTour.js

@@ -20,7 +20,7 @@ export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClo
         'forwardReceipts',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles(componentIds, currentStep);
+    useComponentStyles({ ids: componentIds, selectedId: currentStep });
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const cardSize = 220;
     const steps = {

package/dist/components/tour/RoomsBoardTour.js

@@ -16,7 +16,7 @@ export const RoomsBoardTour = ({ currentStep = 'addRooms', handleClose, handleSt
         'addingItems',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles(componentIds, currentStep);
+    useComponentStyles({ ids: componentIds, selectedId: currentStep });
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const steps = {
         addRooms: {

package/dist/hooks/useComponentStyles.d.ts

@@ -1 +1,7 @@
-export declare const useComponentStyles: (ids: string[], selectedId: string) => void;
+interface UseComponentStyles {
+    ids: string[];
+    selectedId: string;
+    zIndex?: string;
+}
+export declare const useComponentStyles: ({ ids, selectedId, zIndex, }: UseComponentStyles) => void;
+export {};

package/dist/hooks/useComponentStyles.js

@@ -1,10 +1,10 @@
-export const useComponentStyles = (ids, selectedId) => {
+export const useComponentStyles = ({ ids, selectedId, zIndex = 'auto', }) => {
     if ((ids === null || ids === void 0 ? void 0 : ids.length) === 0)
         return;
     ids.forEach((id) => {
         const component = document.getElementById(id);
         if (component) {
-            component.style.zIndex = 'auto';
+            component.style.zIndex = zIndex;
         }
     });
     const currentComponent = document.getElementById(selectedId);

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

@@ -1,3 +1,3 @@
 export interface ApplianceStepsI {
-    onClick: (id: string) => void;
+    onClick: (selectedSteps: string[]) => void;
 }

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

@@ -2,7 +2,7 @@ import { DynamicFormI } from '..';
 export interface HomeAssistantPanelI {
     currentForm: DynamicFormI['form'];
     currentStep: number;
-    onApplianceClick: (id: string) => void;
+    onApplianceClick: (selected: string[]) => void;
     onBack: () => void;
     onClose: () => void;
     onNext: () => void;

package/dist/stories/homeAssistant/panel/HomeAssistantPanel.stories.js

@@ -9,6 +9,7 @@ export default {
     args: {
         currentStep: 4,
         currentForm: homeAssitantStep1FormMock,
+        onApplianceClick: action('onApplianceClick'),
     },
     decorators: [
         (Story) => (_jsx(RightPanel, { isOpen: true, onClose: action('onClose'), children: _jsx(Story, {}) })),

package/package.json

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

package/src/components/homeAssistant/HomeAssistantStepper.tsx

@@ -7,7 +7,7 @@ export const HomeAssistantStepper = ({
   totalSteps,
 }: HomeAssistantStepperI) => {
   return (
-    <Flex gap="1px" w="100%">
+    <Flex gap="1px" w="100%" zIndex="2">
       {Array.from({ length: totalSteps }).map((_, index) => {
         return (
           <Stack key={index} flex="1" spacing="1">

package/src/components/homeAssistant/HomeAssistantSteps.tsx

@@ -9,7 +9,6 @@ export const HomeAssistantSteps = ({
   onStepClick,
   currentPanel,
 }: HomeAssistantStepsI) => {
-  const wrapperZIndex = currentPanel ? undefined : '2'
   const stepId = `homeAssistantButton-${currentPanel}`
   const componentIds = currentPanel
     ? [
@@ -22,14 +21,13 @@ export const HomeAssistantSteps = ({
       ]
     : []
 
-  useComponentStyles(componentIds, stepId)
+  useComponentStyles({ ids: componentIds, selectedId: stepId, zIndex: '2' })
   return (
     <Stack
       spacing="8"
       w="fit-content"
       position="relative"
       top={['-10px', '-30px']}
-      zIndex={wrapperZIndex}
     >
       <HomeAssistantStepper currentStep={currentStep} totalSteps={6} />
       <SimpleGrid columns={[2, 3]} spacing="base">

package/src/components/homeAssistant/panel/ApplianceSteps.tsx

@@ -14,8 +14,20 @@ import {
   Microwave,
   Range,
 } from '@/assets/images'
+import { useState } from 'react'
 
 export const ApplianceSteps = ({ onClick }: ApplianceStepsI) => {
+  const [appliances, setAppliances] = useState<string[]>([])
+  const handleClick = (id: string) => {
+    if (appliances.includes(id)) {
+      const newAppliances = appliances.filter((appliance) => appliance !== id)
+      onClick(newAppliances)
+      return setAppliances(newAppliances)
+    }
+
+    setAppliances([...appliances, id])
+    onClick([...appliances, id])
+  }
   return (
     <Stack spacing="base" bg="lightBlue.2" p="base">
       <Text fontFamily="secondary" fontSize="sm">
@@ -24,7 +36,13 @@ export const ApplianceSteps = ({ onClick }: ApplianceStepsI) => {
       <SimpleGrid columns={[4, 5]} spacing="base">
         {steps.map((step) => (
           <Center key={step.id} w="100%">
-            <ApplianceButton onClick={onClick} step={step} />
+            <ApplianceButton
+              onClick={handleClick}
+              step={{
+                ...step,
+                isCompleted: appliances.includes(step.id),
+              }}
+            />
           </Center>
         ))}
       </SimpleGrid>
@@ -37,60 +55,50 @@ export const steps: ApplianceStepI[] = [
     id: 'fridge',
     title: 'fridge',
     icon: Fridge,
-    isCompleted: true,
   },
   {
     id: 'freezer',
     title: 'freezer',
     icon: Freezer,
-    isCompleted: false,
   },
   {
     id: 'washer',
     title: 'washer',
     icon: Washer,
-    isCompleted: false,
   },
   {
     id: 'dryer',
     title: 'Dryer',
     icon: Dryer,
-    isCompleted: false,
   },
   {
     id: 'dish-washer',
     title: 'Dish Washer',
     icon: Dishwasher,
-    isCompleted: false,
   },
   {
     id: 'cook-top',
     title: 'Cook Top',
     icon: CookTop,
-    isCompleted: false,
   },
   {
     id: 'oven',
     title: 'oven',
     icon: Oven,
-    isCompleted: false,
   },
   {
     id: 'range',
     title: 'range',
     icon: Range,
-    isCompleted: false,
   },
   {
     id: 'hood',
     title: 'hood',
     icon: Hood,
-    isCompleted: false,
   },
   {
     id: 'microwave',
     title: 'microwave',
     icon: Microwave,
-    isCompleted: false,
   },
 ]

package/src/components/tour/HomeBoardTour.tsx

@@ -46,7 +46,7 @@ export const HomeBoardTour = ({
 
   const { coordinates } = useComponentCoordinates(componentIds)
 
-  useComponentStyles(componentIds, currentStep)
+  useComponentStyles({ ids: componentIds, selectedId: currentStep })
 
   const {
     windowDimensions: { width, height },

package/src/components/tour/LaunchpadTour.tsx

@@ -41,7 +41,7 @@ export const LaunchpadTour = ({
 
   const { coordinates } = useComponentCoordinates(componentIds)
 
-  useComponentStyles(componentIds, currentStep)
+  useComponentStyles({ ids: componentIds, selectedId: currentStep })
 
   const {
     windowDimensions: { width, height },

package/src/components/tour/RoomsBoardTour.tsx

@@ -33,7 +33,7 @@ export const RoomsBoardTour = ({
 
   const { coordinates } = useComponentCoordinates(componentIds)
 
-  useComponentStyles(componentIds, currentStep)
+  useComponentStyles({ ids: componentIds, selectedId: currentStep })
 
   const {
     windowDimensions: { width, height },

package/src/hooks/useComponentStyles.ts

@@ -1,11 +1,21 @@
-export const useComponentStyles = (ids: string[], selectedId: string) => {
+interface UseComponentStyles {
+  ids: string[]
+  selectedId: string
+  zIndex?: string
+}
+
+export const useComponentStyles = ({
+  ids,
+  selectedId,
+  zIndex = 'auto',
+}: UseComponentStyles) => {
   if (ids?.length === 0) return
 
   ids.forEach((id) => {
     const component = document.getElementById(id)
 
     if (component) {
-      component.style.zIndex = 'auto'
+      component.style.zIndex = zIndex
     }
   })
 

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

@@ -1,5 +1,5 @@
 import { ApplianceStepI } from '@/interfaces'
 
 export interface ApplianceStepsI {
-  onClick: (id: string) => void
+  onClick: (selectedSteps: string[]) => void
 }

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

@@ -3,7 +3,7 @@ import { DynamicFormI } from '@/interfaces'
 export interface HomeAssistantPanelI {
   currentForm: DynamicFormI['form']
   currentStep: number
-  onApplianceClick: (id: string) => void
+  onApplianceClick: (selected: string[]) => void
   onBack: () => void
   onClose: () => void
   onNext: () => void

package/src/stories/homeAssistant/panel/HomeAssistantPanel.stories.tsx

@@ -18,6 +18,7 @@ export default {
   args: {
     currentStep: 4,
     currentForm: homeAssitantStep1FormMock,
+    onApplianceClick: action('onApplianceClick'),
   },
   decorators: [
     (Story: any) => (