@homefile/components-v2 2.39.2 → 2.39.4

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.
@@ -823,8 +823,8 @@
823
823
  "trending": {
824
824
  "addMortgage": "Mortgage Info",
825
825
  "estimated": "Estimated Market Value",
826
- "mortgage": "Mortgage Balance*",
827
- "public": "*Estimated from Public Data",
826
+ "mortgage": "Mortgage Balance",
827
+ "public": "Estimated from Public Data",
828
828
  "purchase": "Purchase Price",
829
829
  "roi": "EST ROI*",
830
830
  "title": "Trending Value"
@@ -1,2 +1,2 @@
1
1
  import { ContactCardI } from '../../interfaces';
2
- export declare const ContactCard: ({ apiError, contact, index, menuItems, onClick, showAvatar, showHeader, }: ContactCardI) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const ContactCard: ({ apiError, contact, index, menuItems, onClick, onShare, showAvatar, showHeader, }: ContactCardI) => import("react/jsx-runtime").JSX.Element;
@@ -1,12 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Box, Container, Flex, Stack } from '@chakra-ui/react';
3
- import { ContactCardHeader, ContactCardInfo, ContactCardAddress, IconMenu, MoreHorizontal, } from '../../components';
2
+ import { Box, Container, Flex, IconButton, Stack } from '@chakra-ui/react';
3
+ import { ContactCardHeader, ContactCardInfo, ContactCardAddress, IconMenu, MoreHorizontal, Share, } from '../../components';
4
4
  import { colors } from '../../theme/colors';
5
- export const ContactCard = ({ apiError, contact, index, menuItems, onClick, showAvatar, showHeader = true, }) => {
5
+ export const ContactCard = ({ apiError, contact, index, menuItems, onClick, onShare, showAvatar, showHeader = true, }) => {
6
6
  const hasOnClick = typeof onClick === 'function';
7
7
  return (_jsxs(Box, { position: "relative", w: "100%", children: [_jsx(Container, { maxW: "none", textAlign: "start", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(Object.assign(Object.assign({}, contact), { index })), transition: "background-color 0.3s", _hover: {
8
8
  bg: hasOnClick ? 'lightGreen.1' : 'neutral.white',
9
- }, cursor: hasOnClick ? 'pointer' : 'default', children: _jsxs(Stack, { pb: "base", pt: "1", px: "base", spacing: "base", children: [showHeader && (_jsx(ContactCardHeader, { apiError: apiError, contact: contact })), _jsx(CardBody, { contact, index, showAvatar })] }) }), _jsx(Box, { position: "absolute", right: "1", top: "0", zIndex: "overlay", children: _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: contact, menuItems: menuItems, disabled: Number(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) < 1 }) })] }));
9
+ }, cursor: hasOnClick ? 'pointer' : 'default', children: _jsxs(Stack, { pb: "base", pt: "1", px: "base", spacing: "base", children: [showHeader && (_jsx(ContactCardHeader, { apiError: apiError, contact: contact })), _jsx(CardBody, { contact, index, showAvatar })] }) }), Number(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0 && (_jsx(Box, { position: "absolute", right: "1", top: "0", zIndex: "overlay", children: _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: contact, menuItems: menuItems, disabled: Number(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) < 1 }) })), onShare && (_jsx(Box, { position: "absolute", right: "2", bottom: "2", children: _jsx(IconButton, { variant: "icon", icon: _jsx(Share, { size: 14 }), onClick: () => onShare(contact), "aria-label": "share-contact" }) }))] }));
10
10
  };
11
11
  const CardBody = ({ contact, index, showAvatar, }) => {
12
12
  return (_jsxs(Flex, { justify: "space-between", align: "end", gap: "base", children: [_jsx(ContactCardInfo, Object.assign({}, contact, { index, showAvatar })), _jsx(Box, { borderLeft: `1px solid ${colors.lightBlue[1]}`, w: "45%", pl: "base", children: _jsx(ContactCardAddress, Object.assign({}, contact)) })] }));
@@ -1,2 +1,2 @@
1
1
  import { ContactsContentI } from '../../interfaces';
2
- export declare const ContactsContent: ({ apiError, contacts, menuItems, handleClose, children, handleAdd, disabled, onClick, onDeleteContacts, onShareContacts, showLoadMore, handleLoadMore, loadMoreDisabled }: ContactsContentI) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const ContactsContent: ({ apiError, contacts, menuItems, handleClose, children, handleAdd, disabled, onClick, onDeleteContacts, onShareContacts, showLoadMore, handleLoadMore, loadMoreDisabled, }: ContactsContentI) => import("react/jsx-runtime").JSX.Element;
@@ -1,10 +1,10 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { t } from 'i18next';
3
- import { DrawerContent, DrawerHeader, DrawerBody, Flex, Stack, Checkbox, Box, Text, DrawerFooter, Button } from '@chakra-ui/react';
3
+ import { DrawerContent, DrawerHeader, DrawerBody, Flex, Stack, Checkbox, Box, Text, DrawerFooter, Button, } from '@chakra-ui/react';
4
4
  import { Contacts } from '../../assets/images';
5
5
  import { ContactCard, FooterButtons, FooterDrawer, LeftButtonAnimated, LetterDivider, PanelHeader, SearchInput, } from '../../components';
6
6
  import { useAssignableList, useContactsContent, useWindowDimensions, } from '../../hooks';
7
- export const ContactsContent = ({ apiError, contacts, menuItems, handleClose, children, handleAdd, disabled, onClick, onDeleteContacts, onShareContacts, showLoadMore, handleLoadMore, loadMoreDisabled }) => {
7
+ export const ContactsContent = ({ apiError, contacts, menuItems, handleClose, children, handleAdd, disabled, onClick, onDeleteContacts, onShareContacts, showLoadMore, handleLoadMore, loadMoreDisabled, }) => {
8
8
  const { contactsWithoutFirstOrLastName, handleChange, search, splittedContacts, } = useContactsContent(contacts);
9
9
  const { getContactByIds, handleItemSelect, handleSelectAll, isItemSelected, itemsSelected, } = useAssignableList({
10
10
  onItemSelectedChange: () => null,
@@ -17,12 +17,12 @@ export const ContactsContent = ({ apiError, contacts, menuItems, handleClose, ch
17
17
  const showLetterDivider = idx !== 0;
18
18
  return (_jsxs(Stack, { spacing: "0", children: [showLetterDivider && _jsx(LetterDivider, { letter: letter }), _jsx(Stack, { spacing: "2px", children: splittedContacts[letter].map((contact, idx) => {
19
19
  const selected = isItemSelected(contact._id);
20
- return (_jsx(Card, { apiError: apiError, contact: contact, onClick: onClick, index: idx, menuItems: menuItems, selected: selected, onChange: handleItemSelect }, contact._id));
20
+ return (_jsx(Card, { apiError: apiError, contact: contact, onClick: onClick, index: idx, menuItems: menuItems, selected: selected, onChange: handleItemSelect, onShareContact: (contact) => onShareContacts([contact]) }, contact._id));
21
21
  }) })] }, letter));
22
22
  }) }), Number(contactsWithoutFirstOrLastName.length) > 0 && (_jsx(LetterDivider, { letter: "Others" })), _jsx(Box, { children: contactsWithoutFirstOrLastName.map((contact, idx) => {
23
23
  const selected = isItemSelected(contact._id);
24
- return (_jsx(Card, { apiError: apiError, contact: contact, onClick: onClick, index: idx, menuItems: menuItems, selected: selected, onChange: handleItemSelect }, contact._id));
25
- }) })] }), children, showLoadMore && (_jsx(Flex, { justifyContent: 'center', bg: "lightBlue.2", p: '1rem', children: _jsx(Button, { onClick: handleLoadMore, variant: "primaryFooter", disabled: loadMoreDisabled, children: t('buttons.loadMore') }) }))] }), _jsx(DrawerFooter, { p: "0", zIndex: "overlay", children: _jsx(FooterDrawer, { isOpen: !isDisabled, children: _jsx(FooterButtons, { button1: {
24
+ return (_jsx(Card, { apiError: apiError, contact: contact, onClick: onClick, index: idx, menuItems: menuItems, selected: selected, onChange: handleItemSelect, onShareContact: (contact) => onShareContacts([contact]) }, contact._id));
25
+ }) })] }), children, showLoadMore && (_jsx(Flex, { justifyContent: 'center', bg: "lightBlue.2", p: '1rem', children: _jsx(Button, { onClick: handleLoadMore, variant: 'primaryFooter', disabled: loadMoreDisabled, children: t('buttons.loadMore') }) }))] }), _jsx(DrawerFooter, { p: "0", zIndex: "overlay", children: _jsx(FooterDrawer, { isOpen: !isDisabled, children: _jsx(FooterButtons, { button1: {
26
26
  buttonStyle: 'primaryFooter',
27
27
  label: t('buttons.share'),
28
28
  onClick: () => onShareContacts(getContactByIds(itemsSelected)),
@@ -32,6 +32,6 @@ export const ContactsContent = ({ apiError, contacts, menuItems, handleClose, ch
32
32
  onClick: () => onDeleteContacts(itemsSelected),
33
33
  } }) }) })] }));
34
34
  };
35
- const Card = ({ apiError, contact, onClick, index, menuItems, selected, onChange, }) => {
36
- return (_jsxs(Flex, { gap: "3", pl: "base", bg: selected ? 'lightBlue.6' : 'transparent', children: [_jsx(Checkbox, { isChecked: selected, onChange: () => onChange(contact._id) }), _jsx(ContactCard, { apiError: apiError, contact: contact, menuItems: menuItems, onClick: onClick, index: index }, contact._id)] }, contact._id));
35
+ const Card = ({ apiError, contact, onClick, index, menuItems, selected, onChange, onShareContact, }) => {
36
+ return (_jsxs(Flex, { gap: "3", pl: "base", bg: selected ? 'lightBlue.6' : 'transparent', children: [_jsx(Checkbox, { isChecked: selected, onChange: () => onChange(contact._id) }), _jsx(ContactCard, { apiError: apiError, contact: contact, menuItems: menuItems, onClick: onClick, index: index, onShare: onShareContact }, contact._id)] }, contact._id));
37
37
  };
@@ -0,0 +1,4 @@
1
+ export declare const Share: ({ stroke, size }: {
2
+ stroke?: string | undefined;
3
+ size?: number | undefined;
4
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { colors } from '../../theme/colors';
3
+ export const Share = ({ stroke = colors.blue[3], size = 24 }) => {
4
+ return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16.256 17.896", children: _jsxs("g", { id: "Icon_feather-share-2", "data-name": "Icon feather-share-2", transform: "translate(-3.75 -2.25)", children: [_jsx("path", { id: "Caminho_18690", "data-name": "Caminho 18690", d: "M27.419,5.459A2.459,2.459,0,1,1,24.959,3,2.459,2.459,0,0,1,27.419,5.459Z", transform: "translate(-8.163 0)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Caminho_18691", "data-name": "Caminho 18691", d: "M9.419,15.959A2.459,2.459,0,1,1,6.959,13.5,2.459,2.459,0,0,1,9.419,15.959Z", transform: "translate(0 -4.761)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Caminho_18692", "data-name": "Caminho 18692", d: "M27.419,26.459A2.459,2.459,0,1,1,24.959,24,2.459,2.459,0,0,1,27.419,26.459Z", transform: "translate(-8.163 -9.523)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Caminho_18693", "data-name": "Caminho 18693", d: "M12.885,20.265l5.6,3.263", transform: "translate(-3.802 -7.829)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Caminho_18694", "data-name": "Caminho 18694", d: "M18.476,9.765l-5.591,3.263", transform: "translate(-3.802 -3.068)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" })] }) }));
5
+ };
@@ -25,6 +25,7 @@ export * from './MoreHorizontal';
25
25
  export * from './OpenVideo';
26
26
  export * from './Plus';
27
27
  export * from './SearchIcon';
28
+ export * from './Share';
28
29
  export * from './ShareIcon';
29
30
  export * from './Star';
30
31
  export * from './TikTok';
@@ -25,6 +25,7 @@ export * from './MoreHorizontal';
25
25
  export * from './OpenVideo';
26
26
  export * from './Plus';
27
27
  export * from './SearchIcon';
28
+ export * from './Share';
28
29
  export * from './ShareIcon';
29
30
  export * from './Star';
30
31
  export * from './TikTok';
@@ -5,5 +5,5 @@ import { Edit, EstRoi, Plus, TileCard, TileTooltip, TrendingLineChart, TrendingV
5
5
  import { ComputerReport } from '../../../assets/images';
6
6
  import { colors } from '../../../theme/colors';
7
7
  export const TrendingValue = ({ chartData, marketValue = 0, menuItems, mortgageBalance = 0, onMortgageClick, purchasePrice = 0, roi, }) => {
8
- return (_jsx(TileTooltip, { label: "trendingValue", children: _jsx(Box, { children: _jsxs(TileCard, { bg: "lightGreen.8", menuItems: menuItems, title: t('propertyTiles.trending.title'), icon: ComputerReport, fontWeight: "normal", children: [_jsxs(Flex, { gap: "base", p: "base", bg: "lightBlue.1", children: [_jsx(TrendingValueCard, { bg: "lightBlue.2", label: t('propertyTiles.trending.purchase'), value: purchasePrice }), (mortgageBalance > 0) ? (_jsx(TrendingValueCard, { bg: "lightBlue.4", editButton: Boolean(mortgageBalance) && (_jsx(Tooltip, { label: t('tooltips.editValue'), children: _jsx(IconButton, { variant: "menuIconWithShadow", maxW: "fit-content", "aria-label": t('ariaLabels.edit'), p: "1", icon: _jsx(Edit, { size: 16 }), onClick: onMortgageClick }) })), label: t('propertyTiles.trending.mortgage'), value: mortgageBalance })) : (_jsxs(Stack, { spacing: "1", flex: "auto", children: [_jsx(Flex, { align: "center", justify: "space-between", h: "20px", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: t('propertyTiles.trending.mortgage') }) }), _jsxs(Button, { variant: "tertiary", h: "full", onClick: onMortgageClick, w: "full", px: "1", children: [_jsx(Plus, { stroke: colors.blue[3], size: 20 }), t('propertyTiles.trending.addMortgage')] })] }))] }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { children: [_jsx(TrendingValueCard, { bg: "lightGreen.6", fontSize: "3xl", label: t('propertyTiles.trending.estimated'), value: marketValue }), roi && _jsx(EstRoi, { value: roi })] }), chartData && _jsx(TrendingLineChart, { data: chartData }), !chartData && (_jsx(Box, { h: "220px", border: "1px solid", borderColor: "lightGreen.6" })), _jsx(Text, { fontFamily: "secondary", fontSize: "xxs", children: t('propertyTiles.trending.public') })] })] }) }) }));
8
+ return (_jsx(TileTooltip, { label: "trendingValue", children: _jsx(Box, { children: _jsxs(TileCard, { bg: "lightGreen.8", menuItems: menuItems, title: t('propertyTiles.trending.title'), icon: ComputerReport, fontWeight: "normal", children: [_jsxs(Flex, { gap: "base", p: "base", bg: "lightBlue.1", children: [_jsx(TrendingValueCard, { bg: "lightBlue.2", label: t('propertyTiles.trending.purchase'), value: purchasePrice }), (mortgageBalance > 0) ? (_jsx(TrendingValueCard, { bg: "lightBlue.4", editButton: Boolean(mortgageBalance) && (_jsx(Tooltip, { label: t('tooltips.editValue'), children: _jsx(IconButton, { variant: "menuIconWithShadow", maxW: "fit-content", "aria-label": t('ariaLabels.edit'), p: "1", icon: _jsx(Edit, { size: 16 }), onClick: onMortgageClick }) })), label: t('propertyTiles.trending.mortgage'), value: mortgageBalance })) : (_jsxs(Stack, { spacing: "1", flex: "auto", children: [_jsx(Flex, { align: "center", justify: "space-between", h: "20px", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: t('propertyTiles.trending.mortgage') }) }), _jsxs(Button, { variant: "tertiary", h: "full", onClick: onMortgageClick, w: "full", px: "1", children: [_jsx(Plus, { stroke: colors.blue[3], size: 20 }), _jsx(Text, { color: colors.blue[3], as: "span", pl: '.25rem', children: t('propertyTiles.trending.addMortgage') })] })] }))] }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { children: [_jsx(TrendingValueCard, { bg: "lightGreen.6", fontSize: "3xl", label: t('propertyTiles.trending.estimated'), value: marketValue }), roi && _jsx(EstRoi, { value: roi })] }), chartData && _jsx(TrendingLineChart, { data: chartData }), !chartData && (_jsx(Box, { h: "220px", border: "1px solid", borderColor: "lightGreen.6" })), _jsx(Text, { fontFamily: "secondary", fontSize: "xs", children: t('propertyTiles.trending.public') })] })] }) }) }));
9
9
  };
@@ -32,6 +32,7 @@ export interface ContactCardI {
32
32
  index: number;
33
33
  menuItems?: MenuItemI[];
34
34
  onClick?: (contact: ContactAndIndexForm) => void;
35
+ onShare?: (contact: InfoContactCardI) => void;
35
36
  showAvatar?: boolean;
36
37
  showHeader?: boolean;
37
38
  }
@@ -26,4 +26,5 @@ export interface CardOnContactListI {
26
26
  menuItems: ContactsContentI['menuItems'];
27
27
  selected: boolean;
28
28
  onChange: (id: string) => void;
29
+ onShareContact: (contact: InfoContactCardI) => void;
29
30
  }
@@ -0,0 +1,5 @@
1
+ import { Meta } from '@storybook/react';
2
+ import { Share } from '../../components';
3
+ declare const _default: Meta<typeof Share>;
4
+ export default _default;
5
+ export declare const ShareComponent: typeof Share;
@@ -0,0 +1,11 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Center } from '@chakra-ui/react';
3
+ import { Share } from '../../components';
4
+ import { colors } from '../../theme/colors';
5
+ export default {
6
+ title: 'Components/Icons',
7
+ component: Share,
8
+ };
9
+ export const ShareComponent = (args) => {
10
+ return (_jsx(Center, { width: "10rem", p: "base", bg: "white", children: _jsx(Share, Object.assign({}, args, { stroke: colors.blue[1] })) }));
11
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.39.2",
3
+ "version": "2.39.4",
4
4
  "author": "Homefile",
5
5
  "license": "UNLICENSED",
6
6
  "typings": "dist/index.d.ts",