@homefile/components-v2 2.0.0 → 2.1.0

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

@@ -8,3 +8,4 @@ export * from './SelectField.interface'
 export * from './SwitchField.interface'
 export * from './TextAreaField.interface'
 export * from './TextField.interface'
+export * from './UIFields.interface'

package/src/interfaces/partner/PartnerFooter.interface.ts

@@ -12,7 +12,6 @@ export interface SocialLinkI {
 }
 
 export interface PartnerFooterI {
-  iconSize?: number
   socialLinks?: SocialLinkI[]
   websiteUrl: string
   urlText?: string

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

@@ -1,3 +1,4 @@
+import { Shine } from '@/assets/images'
 import { ReportI } from '@/interfaces'
 import { faker } from '@faker-js/faker'
 
@@ -347,3 +348,164 @@ export const contactFieldsMock: ReportI[] = [
     icon: 'image',
   },
 ]
+
+export const tileUIMock: ReportI[] = [
+  {
+    id: faker.database.mongodbObjectId(),
+    name: faker.lorem.word(),
+    description: faker.lorem.sentence(),
+    comments: faker.lorem.sentence(),
+    value: '',
+    type: 'tile-body',
+    visible: true,
+    options: [],
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Shine',
+        description: '',
+        comments: '',
+        value: Shine,
+        type: 'tile-body-logo',
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: '',
+        description: '',
+        comments: '',
+        value: 'We do windows and so much more!',
+        type: 'tile-body-header',
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: '',
+        description: '',
+        comments: '',
+        value: '',
+        type: 'tile-body-section-grid',
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            description: '',
+            comments: '',
+            value: 'Pressure Washing',
+            type: 'vertical-icon',
+            icon: 'sh-pressure',
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            description: '',
+            comments: '',
+            value: 'Widow Cleaning',
+            type: 'vertical-icon',
+            icon: 'sh-window',
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            description: '',
+            comments: '',
+            value: 'Roof Cleaning',
+            type: 'vertical-icon',
+            icon: 'sh-roof',
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            description: '',
+            comments: '',
+            value: 'Holiday Lights',
+            type: 'vertical-icon',
+            icon: 'sh-lights',
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            description: '',
+            comments: '',
+            value: 'Gutter Cleaning',
+            type: 'vertical-icon',
+            icon: 'sh-gutter',
+          },
+        ],
+      },
+
+      {
+        id: faker.database.mongodbObjectId(),
+        name: '',
+        description: '',
+        comments: '',
+        value: '',
+        type: 'tile-body-action',
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            description: '',
+            comments: '',
+            value: 'Schedule Service',
+            type: 'primary-cta',
+            link: 'www.shine.com',
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            description: '',
+            comments: '',
+            value: 'Request Support',
+            type: 'secondary-cta',
+            link: 'open-drawer',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: '',
+    description: '',
+    comments: '',
+    value: '',
+    type: 'tile-form',
+    visible: true,
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: '',
+        description:
+          'We are here to resolve any issues you may be having with our products and services. Please send us a brief description of the issue you are having and we will respond within 24 hours.',
+        comments: '',
+        value: '',
+        type: 'textarea',
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: '',
+        description: '',
+        comments: '',
+        value: '',
+        type: 'grid',
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            description: 'Contact Phone',
+            comments: '',
+            value: '',
+            type: 'telephone',
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            description: 'Contact Email',
+            comments: '',
+            value: '',
+            type: 'email',
+          },
+        ],
+      },
+    ],
+  },
+]

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

@@ -2,22 +2,33 @@ import { Meta } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { Box } from '@chakra-ui/react'
 import { DynamicForm } from '@/components'
-import { formFieldsMock } from '@/mocks'
+import { formFieldsMock, menuMock, socialLinksMock, tileUIMock } from '@/mocks'
 import { DynamicFormI } from '@/interfaces'
 
 export default {
   title: 'Components/Forms/DynamicForm',
   component: DynamicForm,
   args: {
-    form: formFieldsMock,
+    callback: action('callback'),
     onUpload: action('onUpload'),
+    menuItems: menuMock,
+    socialLinks: socialLinksMock,
+    websiteUrl: 'http://www.audreyscheckdesign.com',
   },
 } as Meta
 
 export const DynamicFormComponent = (args: DynamicFormI) => {
   return (
     <Box p="base" bg="neutral.white" w={['full', '500px']}>
-      <DynamicForm {...args} />
+      <DynamicForm {...args} form={formFieldsMock} />
+    </Box>
+  )
+}
+
+export const DynamicUIFormComponent = (args: DynamicFormI) => {
+  return (
+    <Box m="base" w={['full', '320px']}>
+      <DynamicForm {...args} form={tileUIMock} showTitle={false} />
     </Box>
   )
 }