@homefile/components-v2 1.3.0 → 1.4.0

package/src/hooks/forms/useSimpleDynamicForm.ts

@@ -0,0 +1,58 @@
+import { useEffect } from 'react'
+import { FieldValues, useForm } from 'react-hook-form'
+import { FolderFileI, ReportI } from '@/interfaces'
+
+interface UseDynamicFormI {
+  fields: ReportI[]
+  onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void
+}
+
+export const useSimpleDynamicForm = ({ fields }: UseDynamicFormI) => {
+  const form = useForm()
+
+  const { watch, setValue } = form
+
+  const fieldValues = watch()
+
+  const parseCurrenyValue = (value: string | number): number => {
+    if (typeof value === 'number') return value
+    const justNumbers = value?.replace(/[^0-9.]/g, '')
+    return parseFloat(justNumbers)
+  }
+
+  const handleUpdateFields = (
+    field: ReportI,
+    fieldValues: FieldValues
+  ): ReportI => {
+    const value = fieldValues[field.id]
+    const isCurrency = field.type === 'currency'
+    const parsedValue = isCurrency ? parseCurrenyValue(value) : value
+
+    return {
+      ...field,
+      value: parsedValue,
+      children: field?.children?.map((child) =>
+        handleUpdateFields(child, fieldValues)
+      ),
+    }
+  }
+  const updatedFields = fields.map((field) => {
+    return handleUpdateFields(field, fieldValues)
+  })
+
+  const handleSetDefaultValues = (fields: ReportI[]) => {
+    fields.forEach((field) => {
+      setValue(field.id, field.value)
+      handleSetDefaultValues(field.children || [])
+    })
+  }
+
+  useEffect(() => {
+    handleSetDefaultValues(fields)
+  }, [JSON.stringify(fields)])
+
+  return {
+    form,
+    updatedFields,
+  }
+}

package/src/index.ts

@@ -2,6 +2,7 @@ export {
   ActivateAccount,
   ActiveSubscription,
   AddCardBanner,
+  AddEditContactPanel,
   AddFolder,
   AddHomeContent,
   AddHomeItem,
@@ -155,6 +156,7 @@ export {
   ShareHome,
   ShareHomeConnections,
   ShareHomeForm,
+  ShineTile,
   ShortPartnerTile,
   SignIn,
   SignUp,
@@ -180,6 +182,7 @@ export {
   UpdateList,
   UserDetails,
   ValueMonitor,
+  ViewContactPanel,
   VideoPlayer,
   VideoPlayerModal,
   WellDone,

package/src/interfaces/contacts/AddEditContactPanel.interface.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react'
+import { ReportI } from '@/interfaces'
+
+export interface AddEditContactPanelI {
+  detailsComponent: ReactNode
+  isEditing?: boolean
+  onBackClick: () => void
+  permissionsComponent: ReactNode
+}
+
+export interface ContactFormProxyI {
+  fields: ReportI[]
+  setFields(fields: ReportI[]): void
+}

package/src/interfaces/contacts/ContactCard.interface.ts

@@ -1,10 +1,27 @@
-import { MenuItemI, ShareContactPopoverI } from '@/interfaces'
+import {
+  MenuItemI,
+  ShareContactPopoverI,
+  ContactAndIndexForm,
+} from '@/interfaces'
+
+export interface ContactCompanyInfoI {
+  address: string
+  city: string
+  company: string
+  url: string
+  _id: string
+  phone: string
+  state: string
+  zip: string
+  rating?: number
+}
 
 export interface InfoContactCardI {
   address: string
   category: string
   city: string
   company: string
+  companyInfo?: ContactCompanyInfoI
   email: string
   firstName: string
   _id: string
@@ -13,6 +30,7 @@ export interface InfoContactCardI {
   state: string
   title: string
   zip: string
+  notes?: string
 }
 
 export interface ContactCardI {
@@ -20,5 +38,6 @@ export interface ContactCardI {
   contact: InfoContactCardI
   index: number
   menuItems: MenuItemI[]
+  onClick?: (contact: ContactAndIndexForm) => void
   onShare: ShareContactPopoverI['onShare']
 }

package/src/interfaces/contacts/ContactCardInfo.interface.ts

@@ -1,8 +1,9 @@
 export interface ContactCardInfoI {
-  company: string
+  company?: string
   email: string
   firstName: string
   index: number
   lastName: string
   phone: string
-}
+  title?: string
+}

package/src/interfaces/contacts/ContactsContent.interface.ts

@@ -1,6 +1,8 @@
 import { InfoContactCardI, MenuItemI, ShareContactPopoverI } from '@/interfaces'
 import { ReactNode } from 'react'
 
+export type ContactAndIndexForm = InfoContactCardI & { index: number }
+
 export interface ContactsContentI {
   apiError?: boolean
   contacts: InfoContactCardI[]
@@ -9,5 +11,6 @@ export interface ContactsContentI {
   menuItems: MenuItemI[]
   children?: ReactNode
   disabled?: boolean
+  onClick?: (contact: ContactAndIndexForm) => void
   onShare: ShareContactPopoverI['onShare']
 }

package/src/interfaces/contacts/ViewContactPanel.interface.ts

@@ -0,0 +1,10 @@
+import { RoleType } from '@/helpers'
+import { InfoContactCardI, MenuItemI, ShareContactPopoverI } from '@/interfaces'
+
+export interface ViewContactPanelI {
+  contact: InfoContactCardI
+  handleClose: () => void
+  menuItems: MenuItemI[]
+  onShare: ShareContactPopoverI['onShare']
+  roleType: RoleType
+}

package/src/interfaces/contacts/index.ts

@@ -1,3 +1,4 @@
+export * from './AddEditContactPanel.interface'
 export * from './ContactCard.interface'
 export * from './ContactCardAddress.interface'
 export * from './ContactCardHeader.interface'
@@ -5,3 +6,4 @@ export * from './ContactCardInfo.interface'
 export * from './ContactsContent.interface'
 export * from './ShareContactByEmail.interface'
 export * from './ShareContactPopover.interface'
+export * from './ViewContactPanel.interface'

package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts

@@ -61,26 +61,30 @@ export type IconTypes =
   | 'plate'
   | 'house'
   | 'target'
+  | 'title'
+  | 'company'
 
 export type ValueTypes = string | string[] | number | boolean
 export type OptionsTypes = string[] | number[] | null
 
 export interface ReportI {
+  canBeHidden?: boolean
+  children?: ReportI[]
+  comments?: string
+  description?: string
+  icon?: IconTypes
   id: string
   name?: string
-  description?: string
-  comments?: string
-  value: ValueTypes
+  options?: OptionsTypes
   type: KindTypes
+  value: ValueTypes
   visible?: boolean
-  options?: OptionsTypes
-  children?: ReportI[]
-  icon?: IconTypes
 }
 
 export interface DynamicFormI {
   form: ReportI[]
   onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void
+  showTitle?: boolean
   uploadingFieldId?: string
 }
 

package/src/interfaces/forms/dynamicForm/SimpleDynamicForm.interface.ts

@@ -0,0 +1,5 @@
+import { ReportI } from '@/interfaces'
+
+export interface SimpleDynamicFormI {
+  fields: ReportI[]
+}

package/src/interfaces/forms/dynamicForm/fields/FieldWithDelete.interface.ts

@@ -1,5 +1,5 @@
 export interface FieldWithDeleteI {
   id: string
   onRemove?: (id: string) => void
-  isAlwaysVisible?: boolean
+  canBeHidden?: boolean
 }

package/src/interfaces/forms/dynamicForm/fields/GroupField.interface.ts

@@ -2,7 +2,7 @@ import { DynamicFormI } from '@/interfaces'
 
 export interface GroupFieldI {
   id: string
+  canBeHidden?: boolean
   fields?: DynamicFormI['form']
   onRemove: (id: string) => void
-  visible?: boolean
 }

package/src/interfaces/forms/dynamicForm/index.ts

@@ -1,6 +1,6 @@
 export * from './edit'
 export * from './fields'
 export * from './DynamicForm.interface'
-export * from './DynamicFormSimple.interface'
+export * from './SimpleDynamicForm.interface'
 export * from './HiddenField.interface'
 export * from './HiddenFieldSection.interface'

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

@@ -1,5 +1,16 @@
-import { ApplianceStepI } from '@/interfaces'
-
 export interface ApplianceStepsI {
+  addedAppliances?: AppliancesType[]
   onClick: (selectedSteps: string[]) => void
 }
+
+type AppliancesType =
+  | 'fridge'
+  | 'freezer'
+  | 'washer'
+  | 'dryer'
+  | 'dish-washer'
+  | 'cook-top'
+  | 'oven'
+  | 'range'
+  | 'hood'
+  | 'microwave'

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

@@ -1,4 +1,4 @@
-import { DynamicFormI } from '@/interfaces'
+import { DynamicFormI, ReportI } from '@/interfaces'
 
 export interface HomeAssistantPanelI {
   currentForm: DynamicFormI['form']
@@ -7,4 +7,7 @@ export interface HomeAssistantPanelI {
   onBack: () => void
   onClose: () => void
   onNext: () => void
+  onSave: (form: ReportI[]) => void
+  backDisabled: boolean
+  nextDisabled: boolean
 }

package/src/interfaces/homeBoard/HomeCardWithRecipent.interface.ts

@@ -36,4 +36,5 @@ export interface HomeCardWithRecipentI {
   recipients?: AssociatedAccountI[]
   records?: HomeCardRecordsI
   disabled?: boolean
+  propertyDisabled?: boolean
 }

package/src/mocks/contacts/contacts.mock.ts

@@ -9,12 +9,24 @@ export const ContactsMock: InfoContactCardI[] = [
     lastName: faker.person.lastName(),
     email: faker.internet.email(),
     phone: faker.phone.number(),
-    company: 'Company 1',
-    address: '1134 South First Avenue',
-    zip: '78732',
-    city: 'Austin',
-    state: 'TX',
+    company: faker.company.name(),
+    address: faker.location.streetAddress(),
+    zip: faker.location.zipCode(),
+    city: faker.location.city(),
+    state: faker.location.state(),
     _id: faker.database.mongodbObjectId(),
+    notes: faker.lorem.paragraphs(),
+    companyInfo: {
+      address: faker.location.streetAddress(),
+      city: faker.location.city(),
+      company: faker.company.name(),
+      url: faker.internet.url(),
+      _id: faker.database.mongodbObjectId(),
+      phone: faker.phone.number(),
+      state: faker.location.state(),
+      zip: faker.location.zipCode(),
+      rating: faker.number.int({ min: 1, max: 5 }),
+    },
   },
   {
     title: 'Pumpler',

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

@@ -191,3 +191,159 @@ export const formFieldsMock: ReportI[] = [
     icon: 'book',
   },
 ]
+
+export const contactFieldsMock: ReportI[] = [
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'basic-info',
+    value: '',
+    type: 'group',
+    canBeHidden: false,
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'name',
+        value: '',
+        type: 'grid',
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'First Name',
+            value: faker.person.firstName(),
+            type: 'text',
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Last Name',
+            value: faker.person.lastName(),
+            type: 'text',
+          },
+        ],
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Email',
+        value: faker.internet.email(),
+        type: 'text',
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Phone',
+        value: faker.phone.number(),
+        type: 'text',
+      },
+    ],
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Title',
+    value: faker.person.jobTitle(),
+    type: 'text',
+    icon: 'title',
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Category',
+    value: 'Pest Control',
+    type: 'select',
+    options: [
+      'Pest Control',
+      'Maintenance',
+      'Construction',
+      'Misc',
+      'Electrical',
+      'Design',
+      'Finance',
+      'Plumbing',
+    ],
+    icon: 'book',
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'company-info',
+    value: '',
+    type: 'group',
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Company Name',
+        value: faker.company.name(),
+        type: 'text',
+        icon: 'company',
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Company Address',
+        value: faker.location.streetAddress(),
+        type: 'text',
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'company-location',
+        value: '',
+        type: 'grid',
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Zip/Country',
+            value: faker.location.zipCode(),
+            type: 'text',
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'City',
+            value: faker.location.city(),
+            type: 'text',
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'State',
+            value: faker.location.state(),
+            type: 'text',
+          },
+        ],
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'company-contact',
+        value: '',
+        type: 'grid',
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Phone',
+            value: faker.phone.number(),
+            type: 'text',
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Website URL',
+            value: faker.internet.url(),
+            type: 'text',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Notes',
+    value: faker.lorem.text(),
+    type: 'textarea',
+    icon: 'notes',
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Rating',
+    value: faker.number.int({ min: 1, max: 4 }),
+    type: 'rating',
+    icon: 'rating',
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Images',
+    value: [],
+    type: 'file',
+    icon: 'image',
+  },
+]

package/src/proxies/contacts/contactForm.proxy.ts

@@ -0,0 +1,9 @@
+import { proxy } from 'valtio'
+import { ContactFormProxyI } from '@/interfaces'
+
+export const contactFormProxy = proxy<ContactFormProxyI>({
+  fields: [],
+  setFields(fields = []) {
+    this.fields = fields
+  },
+})

package/src/proxies/contacts/index.ts

@@ -0,0 +1 @@
+export * from './contactForm.proxy'

package/src/proxies/index.ts

@@ -1,3 +1,4 @@
+export * from './contacts'
 export * from './forms'
 export * from './homes'
 export * from './partner'

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

@@ -26,9 +26,11 @@ import {
   CheckInCircle,
   CheckPen,
   Chemistry,
+  CircleFace,
   Cleaning,
   Closet,
   Co2,
+  Company,
   ComputerReport,
   Confirmation,
   Construction,
@@ -281,9 +283,11 @@ export const Illustrations = () => {
       <IconWrapper icon={CheckInCircle} name="CheckInCircle" />
       <IconWrapper icon={CheckPen} name="CheckPen" />
       <IconWrapper icon={Chemistry} name="Chemistry" />
+      <IconWrapper icon={CircleFace} name="CircleFace" />
       <IconWrapper icon={Cleaning} name="Cleaning" />
       <IconWrapper icon={Closet} name="Closet" />
       <IconWrapper icon={Co2} name="Co2" />
+      <IconWrapper icon={Company} name="Company" />
       <IconWrapper icon={ComputerReport} name="ComputerReport" />
       <IconWrapper icon={Confirmation} name="Confirmation" />
       <IconWrapper icon={Construction} name="Construction" />

package/src/stories/contacts/AddEditContactPanel.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/react'
+import {
+  AddEditContactPanel,
+  DynamicForm,
+  RightPanel,
+  RolePermissionsTab,
+} from '@/components'
+import { ContactsMock, contactFieldsMock, featuresSelectedMock } from '@/mocks'
+import { AddEditContactPanelI } from '@/interfaces'
+import { action } from '@storybook/addon-actions'
+
+export default {
+  title: 'Components/Contacts',
+  component: AddEditContactPanel,
+  args: {
+    detailsComponent: (
+      <DynamicForm
+        form={contactFieldsMock}
+        showTitle={false}
+        onUpload={action('onUpload')}
+      />
+    ),
+    permissionsComponent: (
+      <RolePermissionsTab
+        selected={featuresSelectedMock}
+        onSelect={action('onSelect')}
+      />
+    ),
+    isEditing: true,
+    menuItems: [
+      {
+        label: 'Edit',
+        handleClick: action('Edit'),
+      },
+    ],
+  },
+} as Meta<AddEditContactPanelI>
+
+export const AddEditContactPanelComponent = (args: AddEditContactPanelI) => {
+  return (
+    <RightPanel isOpen={true} onClose={() => null}>
+      <AddEditContactPanel {...args} />
+    </RightPanel>
+  )
+}

package/src/stories/contacts/ViewContactPanel.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/react'
+import { ViewContactPanel, RightPanel } from '@/components'
+import { ContactsMock } from '@/mocks'
+import { ViewContactPanelI } from '@/interfaces'
+import { action } from '@storybook/addon-actions'
+import { homeRoleTypes } from '@/helpers'
+
+export default {
+  title: 'Components/Contacts',
+  component: ViewContactPanel,
+  argTypes: {
+    roleType: {
+      options: homeRoleTypes,
+      control: { type: 'radio' },
+    },
+  },
+  args: {
+    contact: ContactsMock[0],
+    roleType: 'member',
+    menuItems: [
+      {
+        label: 'Edit',
+        handleClick: action('Edit'),
+      },
+    ],
+  },
+} as Meta<ViewContactPanelI>
+
+export const ViewContactPanelComponent = (args: ViewContactPanelI) => {
+  return (
+    <RightPanel isOpen={true} onClose={() => null}>
+      <ViewContactPanel {...args} />
+    </RightPanel>
+  )
+}

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

@@ -9,6 +9,7 @@ export default {
   component: ApplianceSteps,
   args: {
     onclick: action('clicked'),
+    addedAppliances: ['fridge', 'freezer', 'range', 'hood', 'microwave'],
   },
   decorators: [
     (Story: any) => (
@@ -17,7 +18,7 @@ export default {
       </Box>
     ),
   ],
-} as Meta
+} as Meta<ApplianceStepsI>
 
 export const ApplianceStepsComponent = (args: ApplianceStepsI) => {
   return <ApplianceSteps {...args} />

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

@@ -50,6 +50,7 @@ export const HomeAssistantPanelComponent = (args: HomeAssistantPanelI) => {
       if (prev === 1) return 6
       return prev - 1
     })
+
   const currentForm = forms[currentStep]
   return (
     <HomeAssistantPanel
@@ -58,6 +59,7 @@ export const HomeAssistantPanelComponent = (args: HomeAssistantPanelI) => {
       currentForm={currentForm}
       onNext={handleFormChange}
       onBack={handleBack}
+      onSave={action('onSave')}
     />
   )
 }

package/src/stories/partner/customPartnerTiles/ShineTile.stories.tsx

@@ -0,0 +1,26 @@
+import { ShineTile } from '@/components'
+import { ShortPartnerTileI } from '@/interfaces'
+import { menuMock } from '@/mocks'
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+
+export default {
+  title: 'Components/Partner',
+  component: ShineTile,
+  args: {
+    menuItems: menuMock,
+  },
+  argTypes: {
+    menuItems: {
+      control: { disable: true },
+    },
+  },
+} as Meta
+
+export const ShineTileComponent = (args: ShortPartnerTileI) => {
+  return (
+    <Box maxW="326px">
+      <ShineTile {...args} />
+    </Box>
+  )
+}