@homefile/components-v2 2.22.0 → 2.22.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Center, Flex, Image, Stack, Text } from '@chakra-ui/react';
3
3
  export const AlertTemplate = ({ bg = 'error.1', description, icon, title, }) => {
4
- return (_jsxs(Flex, { gap: "base", px: "base", pt: "1", pb: "4", children: [_jsx(Center, { minW: "60px", h: "60px", bg: bg, borderRadius: "md", children: _jsx(Image, { src: icon, maxH: "36px", w: "auto" }) }), _jsxs(Stack, { children: [_jsx(Text, { fontWeight: "semibold", fontSize: "xl", lineHeight: "1.2", children: title }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1.2", children: description })] })] }));
4
+ return (_jsxs(Flex, { gap: "base", px: "base", pt: "1", pb: "4", children: [_jsx(Center, { minW: "60px", h: "60px", bg: bg, borderRadius: "md", children: _jsx(Image, { src: icon, maxH: "36px", w: "auto" }) }), _jsxs(Stack, { children: [_jsx(Text, { fontWeight: "600", fontSize: "xl", lineHeight: "1.2", children: title }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1.2", children: description })] })] }));
5
5
  };
@@ -15,5 +15,5 @@ export const BackendAlert = ({ id, category, form, callback, onComplete, }) => {
15
15
  component: (_jsx(AlertFields, { fields: (_a = tab.children) !== null && _a !== void 0 ? _a : [], callback: callback })),
16
16
  });
17
17
  })) !== null && _d !== void 0 ? _d : [];
18
- return (_jsxs(BackendAlertCard, { alertBg: headerBg, alertIcon: alertIcon, alertTitle: alertTitle, bg: alertIconBg, icon: (_e = alert === null || alert === void 0 ? void 0 : alert.icon) !== null && _e !== void 0 ? _e : '', title: (_f = alert === null || alert === void 0 ? void 0 : alert.label) !== null && _f !== void 0 ? _f : '', description: (_g = alert === null || alert === void 0 ? void 0 : alert.description) !== null && _g !== void 0 ? _g : '', onComplete: onComplete, id: id, children: [_jsx(Divider, {}), hasChildren && !isSingleTab && _jsx(TabsHeader, { tabList: tabs }), hasChildren && isSingleTab && (_jsx(AlertFields, { fields: (_k = (_j = (_h = alert === null || alert === void 0 ? void 0 : alert.children) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.children) !== null && _k !== void 0 ? _k : [], callback: callback }))] }));
18
+ return (_jsxs(BackendAlertCard, { alertBg: headerBg, alertIcon: alertIcon, alertTitle: alertTitle, bg: alertIconBg, icon: (_e = alert === null || alert === void 0 ? void 0 : alert.icon) !== null && _e !== void 0 ? _e : '', title: (_f = alert === null || alert === void 0 ? void 0 : alert.label) !== null && _f !== void 0 ? _f : '', description: (_g = alert === null || alert === void 0 ? void 0 : alert.description) !== null && _g !== void 0 ? _g : '', onComplete: onComplete, showCollapse: hasChildren, id: id, children: [_jsx(Divider, {}), hasChildren && !isSingleTab && _jsx(TabsHeader, { tabList: tabs }), hasChildren && isSingleTab && (_jsx(AlertFields, { fields: (_k = (_j = (_h = alert === null || alert === void 0 ? void 0 : alert.children) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.children) !== null && _k !== void 0 ? _k : [], callback: callback }))] }));
19
19
  };
@@ -1,3 +1,3 @@
1
1
  import { PropsWithChildren } from 'react';
2
2
  import { BackendAlertCardI } from '../../../interfaces';
3
- export declare const BackendAlertCard: ({ alertBg, alertIcon, alertTitle, children, icon, id, onComplete, ...props }: PropsWithChildren<BackendAlertCardI>) => import("react/jsx-runtime").JSX.Element;
3
+ export declare const BackendAlertCard: ({ alertBg, alertIcon, alertTitle, children, icon, id, onComplete, showCollapse, ...props }: PropsWithChildren<BackendAlertCardI>) => import("react/jsx-runtime").JSX.Element;
@@ -16,7 +16,7 @@ import { AlertHeader, AlertTemplate, AlertTitle } from '../..';
16
16
  import { Warranty } from '../../../assets/images';
17
17
  import { fieldIcons } from '../../../helpers';
18
18
  export const BackendAlertCard = (_a) => {
19
- var { alertBg = 'error.2', alertIcon = Warranty, alertTitle = t('homeAssistant.monitorAlerts.protection'), children, icon = 'warning', id, onComplete } = _a, props = __rest(_a, ["alertBg", "alertIcon", "alertTitle", "children", "icon", "id", "onComplete"]);
19
+ var { alertBg = 'error.2', alertIcon = Warranty, alertTitle = t('homeAssistant.monitorAlerts.protection'), children, icon = 'warning', id, onComplete, showCollapse = true } = _a, props = __rest(_a, ["alertBg", "alertIcon", "alertTitle", "children", "icon", "id", "onComplete", "showCollapse"]);
20
20
  const { isOpen, onToggle } = useDisclosure();
21
- return (_jsxs(Box, { display: "flex", flexDir: "column", bg: "neutral.white", boxShadow: "lg", borderRadius: "lg", overflow: "hidden", minW: "400px", 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 }) }), _jsxs(Flex, { py: "base", bg: "lightBlue.1", justify: id ? 'space-between' : 'end', gap: "4", children: [id && (_jsx(Button, { variant: "unstyled", w: "fit-content", px: "base", fontSize: "sm", color: "blue.3", onClick: () => onComplete === null || onComplete === void 0 ? void 0 : onComplete(id), transition: "color 0.2s", _hover: { color: 'blue.8' }, children: t('homeAssistant.monitorAlerts.completed') })), _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'}`) })] })] }));
21
+ return (_jsxs(Box, { display: "flex", flexDir: "column", bg: "neutral.white", boxShadow: "lg", borderRadius: "lg", overflow: "hidden", minW: "400px", 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 }) }), _jsxs(Flex, { py: "base", bg: "lightBlue.1", justify: id ? 'space-between' : 'end', gap: "4", children: [id && (_jsx(Button, { variant: "unstyled", w: "fit-content", px: "base", fontSize: "sm", color: "blue.3", onClick: () => onComplete === null || onComplete === void 0 ? void 0 : onComplete(id), transition: "color 0.2s", _hover: { color: 'blue.8' }, children: t('homeAssistant.monitorAlerts.completed') })), showCollapse && (_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'}`) }))] })] }));
22
22
  };
@@ -22,5 +22,5 @@ export const PurchaseProduct = (_a) => {
22
22
  good: '#5C81C7',
23
23
  };
24
24
  const bg = bgs[(_b = label === null || label === void 0 ? void 0 : label.toLowerCase()) !== null && _b !== void 0 ? _b : 'best'];
25
- return (_jsxs(Container, { p: "base", position: "relative", boxShadow: "md", children: [_jsx(CustomBadge, { label: label, bg: bg, position: "absolute", top: "2", left: "-1", zIndex: "3" }), _jsxs(Flex, { gap: "base", ml: "6", children: [_jsx(Image, { src: icon, alt: name, objectFit: "contain", w: "70px", h: "70px" }), _jsxs(Stack, { spacing: "0", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", noOfLines: 2, overflow: "hidden", textOverflow: "ellipsis", children: name }), _jsxs(Flex, { alignSelf: "end", gap: "base", align: "end", children: [_jsxs(Stack, { spacing: "0", align: "end", children: [_jsx(Text, { fontSize: "xs", fontFamily: "secondary", color: "red", children: comments }), _jsx(Text, { fontSize: "sm", fontWeight: "bold", lineHeight: "1.2", children: value })] }), _jsx(IconButton, { w: "2rem", h: "2rem", "aria-label": "Add product", variant: "iconOutlined", icon: _jsx(Plus, { size: 20, stroke: colors.blue['3'] }), onClick: () => callback === null || callback === void 0 ? void 0 : callback(Object.assign({ name, icon, value: String(value) }, rest)) })] })] })] })] }));
25
+ return (_jsxs(Container, { p: "base", position: "relative", boxShadow: "md", children: [_jsx(CustomBadge, { label: label, bg: bg, position: "absolute", top: "2", left: "-1", zIndex: "3" }), _jsxs(Flex, { gap: "base", ml: "6", children: [_jsx(Image, { src: icon, alt: name, objectFit: "contain", w: "70px", h: "70px" }), _jsxs(Stack, { spacing: "0", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", noOfLines: 2, overflow: "hidden", textOverflow: "ellipsis", children: name }), _jsxs(Flex, { alignSelf: "end", gap: "base", align: "end", children: [_jsxs(Stack, { spacing: "0", align: "end", children: [_jsx(Text, { fontSize: "xs", fontFamily: "secondary", color: "red", children: comments }), _jsx(Text, { fontSize: "sm", fontWeight: "600", lineHeight: "1.2", children: value })] }), _jsx(IconButton, { w: "2rem", h: "2rem", "aria-label": "Add product", variant: "iconOutlined", icon: _jsx(Plus, { size: 20, stroke: colors.blue['3'] }), onClick: () => callback === null || callback === void 0 ? void 0 : callback(Object.assign({ name, icon, value: String(value) }, rest)) })] })] })] })] }));
26
26
  };
@@ -8,4 +8,5 @@ export interface BackendAlertCardI {
8
8
  title: string;
9
9
  description: string;
10
10
  onComplete?: (id?: string) => void;
11
+ showCollapse?: boolean;
11
12
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.22.0",
3
+ "version": "2.22.1",
4
4
  "author": "Homefile",
5
5
  "license": "UNLICENSED",
6
6
  "typings": "dist/index.d.ts",
@@ -13,7 +13,7 @@ export const AlertTemplate = ({
13
13
  <Image src={icon} maxH="36px" w="auto" />
14
14
  </Center>
15
15
  <Stack>
16
- <Text fontWeight="semibold" fontSize="xl" lineHeight="1.2">
16
+ <Text fontWeight="600" fontSize="xl" lineHeight="1.2">
17
17
  {title}
18
18
  </Text>
19
19
  <Text fontFamily="secondary" fontSize="sm" lineHeight="1.2">
@@ -37,6 +37,7 @@ export const BackendAlert = ({
37
37
  title={alert?.label ?? ''}
38
38
  description={alert?.description ?? ''}
39
39
  onComplete={onComplete}
40
+ showCollapse={hasChildren}
40
41
  id={id}
41
42
  >
42
43
  <Divider />
@@ -14,6 +14,7 @@ export const BackendAlertCard = ({
14
14
  icon = 'warning',
15
15
  id,
16
16
  onComplete,
17
+ showCollapse = true,
17
18
  ...props
18
19
  }: PropsWithChildren<BackendAlertCardI>) => {
19
20
  const { isOpen, onToggle } = useDisclosure()
@@ -53,17 +54,19 @@ export const BackendAlertCard = ({
53
54
  {t('homeAssistant.monitorAlerts.completed')}
54
55
  </Button>
55
56
  )}
56
- <Button
57
- variant="leftRounded"
58
- w="fit-content"
59
- px="8"
60
- fontSize="sm"
61
- fontWeight="medium"
62
- onClick={onToggle}
63
- bg={isOpen ? 'blue.8' : 'blue.2'}
64
- >
65
- {t(`homeAssistant.monitorAlerts.${isOpen ? 'collapse' : 'review'}`)}
66
- </Button>
57
+ {showCollapse && (
58
+ <Button
59
+ variant="leftRounded"
60
+ w="fit-content"
61
+ px="8"
62
+ fontSize="sm"
63
+ fontWeight="medium"
64
+ onClick={onToggle}
65
+ bg={isOpen ? 'blue.8' : 'blue.2'}
66
+ >
67
+ {t(`homeAssistant.monitorAlerts.${isOpen ? 'collapse' : 'review'}`)}
68
+ </Button>
69
+ )}
67
70
  </Flex>
68
71
  </Box>
69
72
  )
@@ -53,7 +53,7 @@ export const PurchaseProduct = ({
53
53
  <Text fontSize="xs" fontFamily="secondary" color="red">
54
54
  {comments}
55
55
  </Text>
56
- <Text fontSize="sm" fontWeight="bold" lineHeight="1.2">
56
+ <Text fontSize="sm" fontWeight="600" lineHeight="1.2">
57
57
  {value}
58
58
  </Text>
59
59
  </Stack>
@@ -8,4 +8,5 @@ export interface BackendAlertCardI {
8
8
  title: string
9
9
  description: string
10
10
  onComplete?: (id?: string) => void
11
+ showCollapse?: boolean
11
12
  }