@homefile/components-v2 1.2.2 → 1.4.0

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/onboarding/pages/NewPassword.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Box } from '@chakra-ui/react'
-import { NewPassword } from '@/components'
+import { NewPassword, CloudsAnimation } from '@/components'
 import { NewPasswordI } from '@/interfaces'
 
 export default {
@@ -10,9 +9,9 @@ export default {
 
 export const NewPasswordPage = (args: NewPasswordI) => {
   return (
-    <Box p="base">
+    <CloudsAnimation>
       <NewPassword {...args} />
-    </Box>
+    </CloudsAnimation>
   )
 }
 

package/src/stories/onboarding/pages/ResendResetPassword.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Box } from '@chakra-ui/react'
-import { ResendResetPassword } from '@/components'
+import { ResendResetPassword, CloudsAnimation } from '@/components'
 import { EmailValidationI } from '@/interfaces'
 
 export default {
@@ -10,9 +9,9 @@ export default {
 
 export const ResendResetPasswordPage = (args: EmailValidationI) => {
   return (
-    <Box p="base">
+    <CloudsAnimation>
       <ResendResetPassword {...args} />
-    </Box>
+    </CloudsAnimation>
   )
 }
 

package/src/stories/onboarding/pages/ResetPassword.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Box } from '@chakra-ui/react'
-import { ResetPassword } from '@/components'
+import { ResetPassword, CloudsAnimation } from '@/components'
 import { ResetPasswordI } from '@/interfaces'
 
 export default {
@@ -10,9 +9,9 @@ export default {
 
 export const ResetPasswordPage = (args: ResetPasswordI) => {
   return (
-    <Box p="base">
+    <CloudsAnimation>
       <ResetPassword {...args} />
-    </Box>
+    </CloudsAnimation>
   )
 }
 

package/src/stories/onboarding/pages/SignIn.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Box } from '@chakra-ui/react'
-import { SignIn } from '@/components'
+import { SignIn, CloudsAnimation } from '@/components'
 import { SignInI } from '@/interfaces'
 
 export default {
@@ -8,9 +7,9 @@ export default {
   component: SignIn,
   decorators: [
     (Story) => (
-      <Box p="base">
+      <CloudsAnimation>
         <Story />
-      </Box>
+      </CloudsAnimation>
     ),
   ],
 } as Meta

package/src/stories/onboarding/pages/SignUp.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Box } from '@chakra-ui/react'
-import { SignUp } from '@/components'
+import { CloudsAnimation, SignUp } from '@/components'
 import { SignUpI } from '@/interfaces'
 
 export default {
@@ -10,9 +9,9 @@ export default {
 
 export const SignUpPage = (args: SignUpI) => {
   return (
-    <Box p="base">
+    <CloudsAnimation>
       <SignUp {...args} />
-    </Box>
+    </CloudsAnimation>
   )
 }
 

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>
+  )
+}

package/dist/components/forms/dynamicForm/DynamicFormSimple.d.ts

@@ -1,2 +0,0 @@
-import { DynamicFormSimpleI } from '../../../interfaces';
-export declare const DynamicFormSimple: ({ form: fields }: DynamicFormSimpleI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/DynamicFormSimple.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormProvider } from 'react-hook-form';
-import { Divider, Stack } from '@chakra-ui/react';
-import { TextField, SelectField, SwitchField, NumberField, FieldDivider, } from '../..';
-import { useDynamicForm } from '../../../hooks';
-import { fieldIcons } from '../../../helpers';
-export const DynamicFormSimple = ({ form: fields }) => {
-    const { form } = useDynamicForm({ fields });
-    return (_jsx(Stack, { bg: "neutral.white", spacing: "0", h: "full", boxShadow: "md", children: _jsx(FormProvider, Object.assign({}, form, { children: _jsxs(_Fragment, { children: [_jsx(Divider, {}), fields === null || fields === void 0 ? void 0 : fields.map((field) => {
-                        const { description, icon, id, name, options, type, value } = field;
-                        const baseProps = {
-                            description,
-                            id,
-                            value,
-                            icon: icon ? fieldIcons[icon] : undefined,
-                            placeholder: name !== null && name !== void 0 ? name : description,
-                        };
-                        switch (type) {
-                            case 'number':
-                                return (_jsx(FieldDivider, { children: _jsx(NumberField, Object.assign({}, baseProps)) }, id));
-                            case 'text':
-                            case 'string':
-                                return (_jsx(FieldDivider, { children: _jsx(TextField, Object.assign({}, baseProps)) }, id));
-                            case 'select':
-                                return (_jsx(FieldDivider, { children: _jsx(SelectField, Object.assign({}, baseProps, { options: options })) }, id));
-                            case 'switch':
-                                return (_jsx(FieldDivider, { children: _jsx(SwitchField, Object.assign({}, baseProps)) }, id));
-                            default:
-                                return null;
-                        }
-                    })] }) })) }));
-};

package/dist/interfaces/forms/dynamicForm/DynamicFormSimple.interface.d.ts

@@ -1,4 +0,0 @@
-import { ReportI } from '../..';
-export interface DynamicFormSimpleI {
-    form: ReportI[];
-}

package/src/components/forms/dynamicForm/DynamicFormSimple.tsx

@@ -1,66 +0,0 @@
-import { FormProvider } from 'react-hook-form'
-import { Divider, Stack } from '@chakra-ui/react'
-import { DynamicFormSimpleI, IconTypes } from '@/interfaces'
-import {
-  TextField,
-  SelectField,
-  SwitchField,
-  NumberField,
-  FieldDivider,
-} from '@/components'
-import { useDynamicForm } from '@/hooks'
-import { fieldIcons } from '@/helpers'
-
-export const DynamicFormSimple = ({ form: fields }: DynamicFormSimpleI) => {
-  const { form } = useDynamicForm({ fields })
-
-  return (
-    <Stack bg="neutral.white" spacing="0" h="full" boxShadow="md">
-      <FormProvider {...form}>
-        <>
-          <Divider />
-          {fields?.map((field) => {
-            const { description, icon, id, name, options, type, value } = field
-
-            const baseProps = {
-              description,
-              id,
-              value,
-              icon: icon ? (fieldIcons[icon] as IconTypes) : undefined,
-              placeholder: name ?? description,
-            }
-            switch (type) {
-              case 'number':
-                return (
-                  <FieldDivider key={id}>
-                    <NumberField {...baseProps} />
-                  </FieldDivider>
-                )
-              case 'text':
-              case 'string':
-                return (
-                  <FieldDivider key={id}>
-                    <TextField {...baseProps} />
-                  </FieldDivider>
-                )
-              case 'select':
-                return (
-                  <FieldDivider key={id}>
-                    <SelectField {...baseProps} options={options} />
-                  </FieldDivider>
-                )
-              case 'switch':
-                return (
-                  <FieldDivider key={id}>
-                    <SwitchField {...baseProps} />
-                  </FieldDivider>
-                )
-              default:
-                return null
-            }
-          })}
-        </>
-      </FormProvider>
-    </Stack>
-  )
-}

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

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