@homefile/components-v2 2.2.4 → 2.3.0

package/src/interfaces/notifications/index.ts

@@ -0,0 +1 @@
+export * from './NotificationsPanel.interface'

package/src/interfaces/partner/adminTiles/index.ts

@@ -1,4 +1,3 @@
 export * from './customerTile'
-export * from './inboxTile'
 export * from './satisfactionTile'
 export * from './ytdTile'

package/src/interfaces/tour/Step.interface.ts

@@ -7,6 +7,8 @@ export interface StepI {
     component: JSX.Element
     leftRef?: string | number
     topRef?: string | number
+    bottomRef?: string | number
+    rightRef?: string | number
     hideFooter?: boolean
     hideHeader?: boolean
   }

package/src/interfaces/valueMonitor/ValueCard.interface.ts

@@ -1,6 +1,6 @@
 export interface ValueCardI {
   balance: string
   totalValue: number
-  year: number | string
+  year?: number | string
   yearValue: number
 }

package/src/mocks/forms/dynamicForm.mock.ts

@@ -166,16 +166,7 @@ export const formFieldsMock: ReportI[] = [
     name: 'Images',
     description: faker.lorem.sentence(),
     comments: faker.lorem.sentence(),
-    value: [
-      faker.image.urlPicsumPhotos(),
-      faker.image.urlPicsumPhotos(),
-      faker.image.urlPicsumPhotos(),
-      faker.image.urlPicsumPhotos(),
-      faker.image.urlPicsumPhotos(),
-      faker.image.urlPicsumPhotos(),
-      faker.image.urlPicsumPhotos(),
-      faker.image.urlPicsumPhotos(),
-    ],
+    value: '',
     type: 'file',
     icon: 'image',
   },
@@ -243,7 +234,16 @@ export const formFieldsMock: ReportI[] = [
     id: faker.database.mongodbObjectId(),
     name: 'Image',
     comments: faker.lorem.sentence(),
-    value: faker.lorem.text(),
+    value: [
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+    ],
     type: 'file',
     visible: false,
     icon: 'image',
@@ -410,7 +410,16 @@ export const contactFieldsMock: ReportI[] = [
   {
     id: faker.database.mongodbObjectId(),
     name: 'Images',
-    value: [],
+    value: [
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+    ],
     type: 'file',
     icon: 'image',
   },
@@ -585,3 +594,56 @@ export const tileUIMock: ReportI[] = [
     ],
   },
 ]
+
+export const viewingHomeItemMock: ReportI[] = [
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Appliances',
+    description:
+      'KitchenAid Counter-depth 20-cu ft French Door Refrigerator with Ice Maker and Water dispenser (Stainless Steel) ENERGY STAR',
+    comments: faker.lorem.sentence(),
+    value: 'Refrigerator',
+    type: 'appliances',
+    visible: true,
+    options: [],
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: '',
+        description: '',
+        comments: '',
+        value: [
+          faker.image.urlLoremFlickr(),
+          faker.image.urlLoremFlickr(),
+          faker.image.urlLoremFlickr(),
+          faker.image.urlLoremFlickr(),
+        ],
+        type: 'images',
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: '',
+        description: '',
+        comments: '',
+        value: 4,
+        type: 'rating',
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Brand',
+        description: '',
+        comments: '',
+        value: 'Kitchen Aid',
+        type: 'text',
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Model#',
+        description: '',
+        comments: '',
+        value: 'KRFC300ESS',
+        type: 'text',
+      },
+    ],
+  },
+]

package/src/mocks/index.ts

@@ -5,6 +5,7 @@ export * from './forms'
 export * from './homeAssistant'
 export * from './myHomes'
 export * from './myProfile'
+export * from './notifications'
 export * from './partner'
 export * from './propertyTiles'
 export * from './receipts'

package/src/mocks/notifications/index.ts

@@ -0,0 +1 @@
+export * from './notifications.mock'

package/src/mocks/notifications/notifications.mock.ts

@@ -0,0 +1,37 @@
+import { NotificationCardI } from '@/interfaces'
+import { faker } from '@faker-js/faker'
+
+export const notificationsMock: NotificationCardI[] = [
+  {
+    active: true,
+    _id: '1',
+    createdAt: new Date(),
+    message: faker.lorem.sentence(),
+    status: 'added',
+    type: 'contact',
+  },
+  {
+    active: true,
+    _id: '2',
+    createdAt: new Date(),
+    message: faker.lorem.sentence(),
+    status: 'removed',
+    type: 'file',
+  },
+  {
+    active: true,
+    _id: '3',
+    createdAt: new Date(),
+    message: faker.lorem.sentence(),
+    status: 'shared',
+    type: 'folder',
+  },
+  {
+    active: true,
+    _id: '4',
+    createdAt: new Date(),
+    message: faker.lorem.sentence(),
+    status: 'updated',
+    type: 'payment',
+  },
+]

package/src/stories/appBar/AppBar.stories.tsx

@@ -14,7 +14,6 @@ import {
 } from '@/components'
 import { useState } from 'react'
 import { Tutorials } from '@/helpers'
-import { Flex } from '@chakra-ui/react'
 import { AppBarI } from '@/interfaces'
 import { useWindowDimensions } from '@/hooks'
 import { MOBILE_WIDTH } from '@/utils'

package/src/stories/appBar/ContactList.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { ContactList } from '@/components'
 import { Box } from '@chakra-ui/react'
-import { PeopleConnectedI } from '@/interfaces'
+import { AppBarIconI } from '@/interfaces'
 
 export default {
   title: 'Components/AppBar',
@@ -9,11 +9,10 @@ export default {
   args: {
     total: 2,
   },
-} as Meta<PeopleConnectedI>
+} as Meta<AppBarIconI>
 
-export const ContactListComponent = (args: PeopleConnectedI) => (
+export const ContactListComponent = (args: AppBarIconI) => (
   <Box p="base" bg="white" w="fit-content">
     <ContactList {...args} />
   </Box>
 )
-

package/src/stories/appBar/PeopleConnected.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { PeopleConnected } from '@/components'
 import { Box } from '@chakra-ui/react'
-import { PeopleConnectedI } from '@/interfaces'
+import { AppBarIconI } from '@/interfaces'
 
 export default {
   title: 'Components/AppBar',
@@ -9,11 +9,10 @@ export default {
   args: {
     total: 12,
   },
-} as Meta<PeopleConnectedI>
+} as Meta<AppBarIconI>
 
-export const PeopleConnectedComponent = (args: PeopleConnectedI) => (
+export const PeopleConnectedComponent = (args: AppBarIconI) => (
   <Box p="base" bg="white" w="fit-content">
     <PeopleConnected {...args} />
   </Box>
 )
-

package/src/stories/appBar/Trash.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { Trash } from '@/components'
 import { Box } from '@chakra-ui/react'
-import { PeopleConnectedI } from '@/interfaces'
+import { AppBarIconI } from '@/interfaces'
 
 export default {
   title: 'Components/AppBar',
@@ -9,12 +9,10 @@ export default {
   args: {
     total: 2,
   },
-} as Meta<PeopleConnectedI>
+} as Meta<AppBarIconI>
 
-export const TrashComponent = (args: PeopleConnectedI) => (
+export const TrashComponent = (args: AppBarIconI) => (
   <Box p="base" bg="white" w="fit-content">
     <Trash {...args} />
   </Box>
 )
-
-

package/src/stories/assets/Illustrations.stories.tsx

@@ -151,6 +151,7 @@ import {
   Social,
   SmallAppliances,
   SolarPanel,
+  Speaker,
   Sprinkler,
   Steps,
   Structure,
@@ -386,6 +387,7 @@ export const Illustrations = () => {
       <IconWrapper icon={SMS} name="SMS" />
       <IconWrapper icon={Social} name="Social" />
       <IconWrapper icon={SolarPanel} name="SolarPanel" />
+      <IconWrapper icon={Speaker} name="Speaker" />
       <IconWrapper icon={Sprinkler} name="Sprinkler" />
       <IconWrapper icon={Structure} name="Structure" />
       <IconWrapper icon={Subscription} name="Subscription" />

package/src/stories/forms/dynamicForm/DynamicForm.stories.tsx

@@ -4,11 +4,24 @@ import { Box } from '@chakra-ui/react'
 import { DynamicForm } from '@/components'
 import { formFieldsMock, menuMock, socialLinksMock, tileUIMock } from '@/mocks'
 import { DynamicFormI } from '@/interfaces'
+import { faker } from '@faker-js/faker'
 
 export default {
   title: 'Components/Forms/DynamicForm',
   component: DynamicForm,
   args: {
+    callback: action('callback'),
+    displayImages: [
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+      faker.image.urlPicsumPhotos(),
+    ],
+    onUpload: action('onUpload'),
     menuItems: menuMock,
     socialLinks: socialLinksMock,
     websiteUrl: 'http://www.audreyscheckdesign.com',

package/src/stories/homeItems/ViewingHomeItem.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/react'
+import { RightPanel, ViewingHomeItemPanel } from '@/components'
+import { action } from '@storybook/addon-actions'
+import { ViewingHomeItemPanelI } from '@/interfaces'
+import { viewingHomeItemMock } from '@/mocks'
+
+export default {
+  title: 'Components/HomeItems',
+  component: ViewingHomeItemPanel,
+  args: {
+    form: viewingHomeItemMock,
+    onEdit: action('onEdit'),
+  },
+  decorators: [
+    (Story) => (
+      <RightPanel isOpen onClose={action('onClose')}>
+        <Story />
+      </RightPanel>
+    ),
+  ],
+} as Meta<ViewingHomeItemPanelI>
+
+export const ViewingHomeItemPanelComponent = (args: ViewingHomeItemPanelI) => (
+  <ViewingHomeItemPanel {...args} />
+)

package/src/stories/inboxTile/inboxTile.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { InboxForwardBanner, InboxTile } from '@/components'
+import { InboxTileI } from '@/interfaces'
+import { Message, Register } from '@/assets/images'
+import { menuMock } from '@/mocks'
+
+export default {
+  title: 'Components/Inbox',
+  component: InboxTile,
+  args: {
+    banner: <InboxForwardBanner />,
+    boxes: [
+      {
+        image: Register,
+        name: 'Receipts',
+        newMessages: 1,
+        totalMessages: 37,
+      },
+      {
+        image: Message,
+        name: 'Messages',
+        totalMessages: 2,
+      },
+    ],
+    menuItems: menuMock,
+  },
+} as Meta
+
+export const InboxTileComponent = (args: InboxTileI) => {
+  return (
+    <Box p="base" w={['full', '350px']} h="400px">
+      <InboxTile {...args} />
+    </Box>
+  )
+}

package/src/stories/notifications/NotificationsPanel.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/react'
+import { RightPanel, NotificationsPanel } from '@/components'
+import { action } from '@storybook/addon-actions'
+import { NotificationsPanelI } from '@/interfaces'
+import { notificationsMock } from '@/mocks'
+
+export default {
+  title: 'Components/Notifications',
+  component: NotificationsPanel,
+  args: {
+    notifications: notificationsMock,
+    onClose: action('onClose'),
+    onDismiss: action('onDismiss'),
+  },
+  decorators: [
+    (Story) => (
+      <RightPanel isOpen onClose={action('onClose')} size="sm">
+        <Story />
+      </RightPanel>
+    ),
+  ],
+} as Meta<NotificationsPanelI>
+
+export const NotificationsPanelComponent = (args: NotificationsPanelI) => (
+  <NotificationsPanel {...args} />
+)

package/src/stories/valueMonitor/ValueMonitor.stories.tsx

@@ -20,6 +20,6 @@ ValueMonitorComponent.args = {
   balance: '+3%',
   menuItems: [],
   totalValue: 200000,
-  year: 2021,
+  // year: 2021,
   yearValue: 50000,
 }

package/src/theme/colors.ts

@@ -37,6 +37,7 @@ export const colors = {
     3: '#DE9E35',
     4: '#F1BB87',
     5: '#F78D69',
+    6: '#FFFCE6',
   },
   lightBlue: {
     1: '#F4F7F8',

package/dist/components/partner/adminTiles/inboxTile/InboxCard.d.ts

@@ -1,2 +0,0 @@
-import { InboxCardI } from '../../../../interfaces';
-export declare const InboxCard: ({ image, name, newMessages, totalMessages, }: InboxCardI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/partner/adminTiles/inboxTile/InboxCard.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { t } from 'i18next';
-import { Flex, Image, Text } from '@chakra-ui/react';
-import { TextBadge } from '../../..';
-export const InboxCard = ({ image, name, newMessages = 0, totalMessages, }) => {
-    const message = `${newMessages} ${t('badges.new')}`;
-    return (_jsxs(Flex, { align: "center", justify: "space-between", px: "base", py: "6", bg: "neutral.white", borderTop: "1px solid", borderColor: "lightBlue.5", children: [_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Image, { src: image, alt: name }), _jsx(Text, { children: name })] }), _jsxs(Flex, { align: "center", gap: "6", children: [_jsx(TextBadge, { text: message, showAnimation: false, bgColor: "violet.1" }), _jsx(Text, { fontSize: "30px", fontWeight: "medium", color: "blue.2", children: totalMessages })] })] }));
-};

package/dist/components/partner/adminTiles/inboxTile/InboxTile.d.ts

@@ -1,2 +0,0 @@
-import { InboxTileI } from '../../../../interfaces';
-export declare const InboxTile: ({ boxes, menuItems }: InboxTileI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/partner/adminTiles/inboxTile/InboxTile.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { t } from 'i18next';
-import { Container } from '@chakra-ui/react';
-import { ContainerHeader, InboxCard, MoreHorizontal } from '../../..';
-import { Inbox } from '../../../../assets/images';
-export const InboxTile = ({ boxes, menuItems }) => {
-    return (_jsxs(Container, { variant: "launchpad", maxW: "358px", bg: "neutral.white", children: [_jsx(ContainerHeader, { menuItems: menuItems, title: t('partner.tiles.inbox'), icon: _jsx(MoreHorizontal, { size: 38 }), titleIcon: Inbox }), boxes.map((box) => (_jsx(InboxCard, Object.assign({}, box), box.name)))] }));
-};

package/dist/interfaces/appBar/PeopleConnected.interface.d.ts

@@ -1,4 +0,0 @@
-export interface PeopleConnectedI {
-    onClick: () => void;
-    total: number;
-}

package/dist/interfaces/partner/adminTiles/inboxTile/InboxCard.interface.d.ts

@@ -1,6 +0,0 @@
-export interface InboxCardI {
-    image: string;
-    name: string;
-    newMessages: number;
-    totalMessages: number;
-}

package/dist/interfaces/partner/adminTiles/inboxTile/InboxTile.interface.d.ts

@@ -1,5 +0,0 @@
-import { InboxCardI, MenuItemI } from '../../..';
-export interface InboxTileI {
-    boxes: InboxCardI[];
-    menuItems?: MenuItemI[];
-}

package/dist/stories/partner/adminTiles/InboxTile.stories.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@chakra-ui/react';
-import { InboxTile } from '../../../components';
-import { Document } from '../../../assets/images';
-import { menuMock } from '../../../mocks';
-export default {
-    title: 'Components/Partner/Admin Tiles/Inbox',
-    component: InboxTile,
-    args: {
-        boxes: [
-            {
-                image: Document,
-                name: 'Inbox',
-                newMessages: 10,
-                totalMessages: 32,
-            },
-            {
-                image: Document,
-                name: 'Inbox2',
-                newMessages: 10,
-                totalMessages: 32,
-            },
-            {
-                image: Document,
-                name: 'Inbox3',
-                newMessages: 10,
-                totalMessages: 32,
-            },
-        ],
-        menuItems: menuMock,
-    },
-};
-export const InboxTileComponent = (args) => {
-    return (_jsx(Box, { p: "base", w: ['full', '400px'], children: _jsx(InboxTile, Object.assign({}, args)) }));
-};

package/src/components/partner/adminTiles/inboxTile/InboxCard.tsx

@@ -1,35 +0,0 @@
-import { t } from 'i18next'
-import { Flex, Image, Text } from '@chakra-ui/react'
-import { TextBadge } from '@/components'
-import { InboxCardI } from '@/interfaces'
-
-export const InboxCard = ({
-  image,
-  name,
-  newMessages = 0,
-  totalMessages,
-}: InboxCardI) => {
-  const message = `${newMessages} ${t('badges.new')}`
-  return (
-    <Flex
-      align="center"
-      justify="space-between"
-      px="base"
-      py="6"
-      bg="neutral.white"
-      borderTop="1px solid"
-      borderColor="lightBlue.5"
-    >
-      <Flex align="center" gap="base">
-        <Image src={image} alt={name} />
-        <Text>{name}</Text>
-      </Flex>
-      <Flex align="center" gap="6">
-        <TextBadge text={message} showAnimation={false} bgColor="violet.1" />
-        <Text fontSize="30px" fontWeight="medium" color="blue.2">
-          {totalMessages}
-        </Text>
-      </Flex>
-    </Flex>
-  )
-}

package/src/components/partner/adminTiles/inboxTile/InboxTile.tsx

@@ -1,21 +0,0 @@
-import { t } from 'i18next'
-import { Container } from '@chakra-ui/react'
-import { ContainerHeader, InboxCard, MoreHorizontal } from '@/components'
-import { Inbox } from '@/assets/images'
-import { InboxTileI } from '@/interfaces'
-
-export const InboxTile = ({ boxes, menuItems }: InboxTileI) => {
-  return (
-    <Container variant="launchpad" maxW="358px" bg="neutral.white">
-      <ContainerHeader
-        menuItems={menuItems}
-        title={t('partner.tiles.inbox')}
-        icon={<MoreHorizontal size={38} />}
-        titleIcon={Inbox}
-      />
-      {boxes.map((box) => (
-        <InboxCard key={box.name} {...box} />
-      ))}
-    </Container>
-  )
-}

package/src/interfaces/appBar/PeopleConnected.interface.ts

@@ -1,4 +0,0 @@
-export interface PeopleConnectedI {
-  onClick: () => void
-  total: number
-}

package/src/interfaces/partner/adminTiles/inboxTile/InboxCard.interface.ts

@@ -1,6 +0,0 @@
-export interface InboxCardI {
-  image: string
-  name: string
-  newMessages: number
-  totalMessages: number
-}

package/src/interfaces/partner/adminTiles/inboxTile/InboxTile.interface.ts

@@ -1,6 +0,0 @@
-import { InboxCardI, MenuItemI } from '@/interfaces'
-
-export interface InboxTileI {
-  boxes: InboxCardI[]
-  menuItems?: MenuItemI[]
-}

package/src/stories/partner/adminTiles/InboxTile.stories.tsx

@@ -1,42 +0,0 @@
-import { Meta } from '@storybook/react'
-import { Box } from '@chakra-ui/react'
-import { InboxTile } from '@/components'
-import { InboxTileI } from '@/interfaces'
-import { Document } from '@/assets/images'
-import { menuMock } from '@/mocks'
-
-export default {
-  title: 'Components/Partner/Admin Tiles/Inbox',
-  component: InboxTile,
-  args: {
-    boxes: [
-      {
-        image: Document,
-        name: 'Inbox',
-        newMessages: 10,
-        totalMessages: 32,
-      },
-      {
-        image: Document,
-        name: 'Inbox2',
-        newMessages: 10,
-        totalMessages: 32,
-      },
-      {
-        image: Document,
-        name: 'Inbox3',
-        newMessages: 10,
-        totalMessages: 32,
-      },
-    ],
-    menuItems: menuMock,
-  },
-} as Meta
-
-export const InboxTileComponent = (args: InboxTileI) => {
-  return (
-    <Box p="base" w={['full', '400px']}>
-      <InboxTile {...args} />
-    </Box>
-  )
-}