@homefile/components-v2 2.3.0 → 2.4.0

package/src/mocks/inbox/messages.ts

@@ -0,0 +1,141 @@
+import { InboxMessageI } from '@/interfaces'
+import { faker } from '@faker-js/faker'
+
+const currentUserName = faker.internet.userName()
+
+export const messagesMock: InboxMessageI[] = [
+  {
+    _id: faker.database.mongodbObjectId(),
+    chatReplies: [
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [
+          {
+            _id: faker.database.mongodbObjectId(),
+            chatReplies: [],
+            description: faker.lorem.paragraphs(),
+            date: faker.date.recent(),
+            from: faker.person.fullName(),
+            isNew: false,
+            subject: faker.lorem.words(),
+          },
+        ],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: currentUserName,
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+    ],
+    currentUser: {
+      userName: currentUserName,
+    },
+    description: faker.lorem.paragraphs(),
+    date: faker.date.recent(),
+    from: faker.person.fullName(),
+    isNew: true,
+    subject: faker.lorem.words(),
+  },
+  {
+    _id: faker.database.mongodbObjectId(),
+    chatReplies: [
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: currentUserName,
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+    ],
+    currentUser: {
+      userName: currentUserName,
+    },
+    description: faker.lorem.paragraphs(),
+    date: faker.date.recent(),
+    from: faker.person.fullName(),
+    isNew: false,
+    subject: faker.lorem.words(),
+  },
+  {
+    _id: faker.database.mongodbObjectId(),
+    chatReplies: [
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+    ],
+    currentUser: {
+      userName: currentUserName,
+    },
+    description: faker.lorem.paragraphs(),
+    date: faker.date.recent(),
+    from: faker.person.fullName(),
+    isNew: true,
+    subject: faker.lorem.words(),
+  },
+  {
+    _id: faker.database.mongodbObjectId(),
+    chatReplies: [
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: currentUserName,
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+    ],
+    currentUser: {
+      userName: currentUserName,
+    },
+    description: faker.lorem.paragraphs(),
+    date: faker.date.recent(),
+    from: faker.person.fullName(),
+    isNew: false,
+    subject: faker.lorem.words(),
+  },
+]

package/src/mocks/index.ts

@@ -3,6 +3,7 @@ export * from './contacts'
 export * from './folderPanel'
 export * from './forms'
 export * from './homeAssistant'
+export * from './inbox'
 export * from './myHomes'
 export * from './myProfile'
 export * from './notifications'

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

@@ -8,7 +8,7 @@ export const notificationsMock: NotificationCardI[] = [
     createdAt: new Date(),
     message: faker.lorem.sentence(),
     status: 'added',
-    type: 'contact',
+    label: 'contact added',
   },
   {
     active: true,
@@ -16,7 +16,7 @@ export const notificationsMock: NotificationCardI[] = [
     createdAt: new Date(),
     message: faker.lorem.sentence(),
     status: 'removed',
-    type: 'file',
+    label: 'file removed',
   },
   {
     active: true,
@@ -24,7 +24,7 @@ export const notificationsMock: NotificationCardI[] = [
     createdAt: new Date(),
     message: faker.lorem.sentence(),
     status: 'shared',
-    type: 'folder',
+    label: 'folder shared',
   },
   {
     active: true,
@@ -32,6 +32,6 @@ export const notificationsMock: NotificationCardI[] = [
     createdAt: new Date(),
     message: faker.lorem.sentence(),
     status: 'updated',
-    type: 'payment',
+    label: 'updated payment',
   },
 ]

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

@@ -46,6 +46,7 @@ import {
   DiningRoom,
   DocIcon,
   Document,
+  Document2,
   Doors,
   Drop,
   DropCalendar,
@@ -304,6 +305,7 @@ export const Illustrations = () => {
       <IconWrapper icon={DiningRoom} name="DiningRoom" />
       <IconWrapper icon={DocIcon} name="DocIcon" />
       <IconWrapper icon={Document} name="Document" />
+      <IconWrapper icon={Document2} name="Document2" />
       <IconWrapper icon={Drop} name="Drop" />
       <IconWrapper icon={DropCalendar} name="DropCalendar" />
       <IconWrapper icon={Electricity} name="Electricity" />

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

@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/react'
+import { MessageChatPanel, MessagePanel, RightPanel } from '@/components'
+import { action } from '@storybook/addon-actions'
+import { InboxMessageI, MessagePanelI } from '@/interfaces'
+import { messagesMock } from '@/mocks'
+import { Fragment, useState } from 'react'
+
+export default {
+  title: 'Components/Inbox',
+  component: MessagePanel,
+  args: {
+    messages: messagesMock,
+  },
+  decorators: [
+    (Story) => (
+      <RightPanel isOpen onClose={action('onClose')}>
+        <Story />
+      </RightPanel>
+    ),
+  ],
+} as Meta<MessagePanelI>
+
+export const MessagePanelComponent = (args: MessagePanelI) => {
+  const [showMessageChat, setShowMessageChat] = useState(false)
+  const [selectedMessage, setSelectedMessage] =
+    useState<InboxMessageI | undefined>(undefined)
+  const handleMessageChatToggle = () => setShowMessageChat(!showMessageChat)
+  return (
+    <Fragment>
+      <MessagePanel
+        {...args}
+        onClick={(message) => {
+          setSelectedMessage(message)
+          handleMessageChatToggle()
+        }}
+      />
+      <RightPanel isOpen={showMessageChat} onClose={handleMessageChatToggle}>
+        <MessageChatPanel
+          message={selectedMessage}
+          onReply={action('onReply')}
+          onClose={action('onCloseChatPanel')}
+          onBack={handleMessageChatToggle}
+        />
+      </RightPanel>
+    </Fragment>
+  )
+}

package/src/theme/colors.ts

@@ -115,7 +115,10 @@ export const colors = {
     1: '#f5ddf4',
     2: '#F544DA',
   },
-  skyGradient: 'linear(to-b, #cff1fc, #F9FEFF)',
+  dayGradient: 'linear(to-b, #cff1fc, #F9FEFF)',
+  morningGradient: 'linear(to-b, #d2abf1, #f7dcac)',
+  eveningGradient: 'linear(to-b, #bcc5f2, #ee91f3)',
+  nightGradient: 'linear(to-b, #7a7bcf, #a4b0d7)',
   overlay: '#00000040',
   overlayWhite: '#FFFFFF80',
 }

package/src/utils/Animations.utils.ts

@@ -0,0 +1,39 @@
+export type TimeOfDay = 'morning' | 'day' | 'evening' | 'night'
+export type Season = 'spring' | 'summer' | 'fall' | 'winter'
+export type TimeOfDaySeason = `${TimeOfDay}-${Season}`
+
+export const getTimeOfDay = (): TimeOfDay => {
+  const currentHour = new Date().getHours()
+
+  switch (true) {
+    case currentHour >= 6 && currentHour < 12:
+      return 'morning'
+    case currentHour >= 12 && currentHour < 18:
+      return 'day'
+    case currentHour >= 18 && currentHour < 21:
+      return 'evening'
+    default:
+      return 'night'
+  }
+}
+
+export const getSeason = (): Season => {
+  const currentMonth = new Date().getMonth()
+
+  switch (true) {
+    case currentMonth >= 2 && currentMonth < 5:
+      return 'spring'
+    case currentMonth >= 5 && currentMonth < 8:
+      return 'summer'
+    case currentMonth >= 8 && currentMonth < 11:
+      return 'fall'
+    default:
+      return 'winter'
+  }
+}
+
+export const getTimeOfDaySeason = (): TimeOfDaySeason => {
+  const timeOfDay = getTimeOfDay()
+  const season = getSeason()
+  return `${timeOfDay}-${season}` as TimeOfDaySeason
+}

package/src/utils/Avatars.utils.ts

@@ -34,9 +34,9 @@ const colors = [
   '#37323E',
 ]
 
-export const randomColor = (index: number) => {
+export const randomColor = (index = Math.floor(Math.random() * 30)) => {
   if (index >= colors.length) {
     return colors[index % colors.length]
   }
   return colors[index]
-}
+}

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './AddMedia.utils'
+export * from './Animations.utils'
 export * from './Avatars.utils'
 export * from './BrowserDetectors.utils'
 export * from './BubblesTour.utils'