@homefile/components-v2 2.7.34 → 2.8.0

package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormFooter.d.ts

@@ -0,0 +1,2 @@
+import { FormFooterI } from '../../../../interfaces';
+export declare const ItemFormFooter: ({ onSave, onCancel }: FormFooterI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormFooter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { FooterButtons } from '../../..';
+export const ItemFormFooter = ({ onSave, onCancel }) => {
+    const buttonsFooter = {
+        button1: {
+            buttonStyle: 'primaryFooter',
+            label: t('buttons.save'),
+            onClick: onSave,
+        },
+    };
+    return _jsx(FooterButtons, { button1: buttonsFooter.button1 });
+};

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

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { ItemFormPanelI } from '../../../../interfaces';
+export declare const ItemFormPanel: ({ children, itemName, onClose, onSaveItemName, onSubmitForm, panelIcon, panelTitle, showFooter, }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DrawerBody, DrawerHeader, DrawerContent, DrawerFooter, Box, } from '@chakra-ui/react';
+import { PanelHeader, FooterDrawer, ItemNameHeader, ItemFormFooter, Overlay, } from '../../..';
+export const ItemFormPanel = ({ children, itemName, onClose, onSaveItemName, onSubmitForm, panelIcon, panelTitle, showFooter = false, }) => {
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", zIndex: 4, children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsxs(DrawerBody, { padding: "0", bg: "lightBlue.1", children: [_jsx(ItemNameHeader, { id: "item-name", onSave: onSaveItemName, value: itemName }), _jsx(Box, { position: "relative", children: _jsx(Overlay, { showOverlay: !itemName, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }) }), children] }), _jsx(FooterDrawer, { isOpen: showFooter, children: _jsx(DrawerFooter, { w: "100%", children: _jsx(ItemFormFooter, { onSave: onSubmitForm, onCancel: onClose }) }) })] }));
+};

package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormTabImage.d.ts

@@ -0,0 +1,2 @@
+import { ItemFormTabImageI } from '../../../../interfaces';
+export declare const ItemFormTabImage: ({ reportId, showHeader, isLoading, images, uploading, onDelete, onEdit, onUpload, onOpen, }: ItemFormTabImageI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormTabImage.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Center, Text } from '@chakra-ui/react';
+import { AddMedia } from '../../..';
+export const ItemFormTabImage = ({ reportId = '', showHeader = true, isLoading = false, images = [], uploading = false, onDelete = () => null, onEdit = () => null, onUpload = () => null, onOpen = () => null, }) => {
+    if (!reportId) {
+        return (_jsx(Center, { h: "300px", children: _jsx(Text, { fontFamily: "secondary", children: "Please save form to add images." }) }));
+    }
+    return (_jsx(AddMedia, { showHeader: showHeader, loading: isLoading, images: images, uploading: uploading, handleDelete: onDelete, handleEdit: onEdit, handleUpload: onUpload, handleOpen: onOpen }));
+};

package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormTabs.d.ts

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

package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormTabs.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box } from '@chakra-ui/react';
+import { DynamicForm, TabsHeader, ItemFormTabImage } from '../../..';
+export const ItemFormTabs = (_a) => {
+    var { form = [] } = _a, props = __rest(_a, ["form"]);
+    const tabList = [
+        {
+            label: t('createDocument.tabs.tab1'),
+            component: (_jsx(Box, { overflow: "scroll", minH: "100vh", children: _jsx(DynamicForm, { form: form }) })),
+        },
+        {
+            label: t('createDocument.tabs.tab2'),
+            component: _jsx(ItemFormTabImage, Object.assign({}, props)),
+        },
+    ];
+    return _jsx(TabsHeader, { tabList: tabList });
+};

package/dist/components/forms/dynamicForm/ItemFormPanel/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ItemFormFooter';
+export * from './ItemFormPanel';
+export * from './ItemFormTabImage';
+export * from './ItemFormTabs';

package/dist/components/forms/dynamicForm/ItemFormPanel/index.js

@@ -0,0 +1,4 @@
+export * from './ItemFormFooter';
+export * from './ItemFormPanel';
+export * from './ItemFormTabImage';
+export * from './ItemFormTabs';

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

@@ -1,4 +1,5 @@
 export * from './fields';
+export * from './ItemFormPanel';
 export * from './DynamicForm';
 export * from './SimpleDynamicForm';
 export * from './HiddenField';

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

@@ -1,4 +1,5 @@
 export * from './fields';
+export * from './ItemFormPanel';
 export * from './DynamicForm';
 export * from './SimpleDynamicForm';
 export * from './HiddenField';

package/dist/components/householdItems/ItemNameHeader.d.ts

@@ -1,2 +1,2 @@
 import { ItemNameHeaderI } from '../../interfaces';
-export declare const ItemNameHeader: ({ id, handleChange, value, handleSave, padding, }: ItemNameHeaderI) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemNameHeader: ({ id, value, onSave, padding, }: ItemNameHeaderI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/householdItems/ItemNameHeader.js

@@ -3,6 +3,11 @@ import { t } from 'i18next';
 import { Box, Flex, Button } from '@chakra-ui/react';
 import { TextInput } from '..';
 import { isEmptyField } from '../../utils';
-export const ItemNameHeader = ({ id = '', handleChange, value, handleSave, padding = 'base', }) => {
-    return (_jsx(Box, { bg: "lightBlue.2", p: padding, w: "100%", children: _jsxs(Flex, { gap: "base", align: "center", children: [_jsx(TextInput, { errorMessage: `${t('householdItems.headers.itemName')} ${t('forms.required')}`, hasError: isEmptyField(value), id: id, handleChange: handleChange, placeholder: t('householdItems.headers.placeholder'), value: value }), value && (_jsx(Button, { variant: "secondary", maxW: "fit-content", maxH: "input.md", onClick: handleSave, children: t('createDocument.buttons.save') }))] }) }));
+import { useState } from 'react';
+export const ItemNameHeader = ({ id = '', value = '', onSave, padding = 'base', }) => {
+    const [name, setName] = useState(value);
+    const handleChange = (e) => {
+        setName(e.target.value);
+    };
+    return (_jsx(Box, { bg: "lightBlue.2", p: padding, w: "100%", children: _jsxs(Flex, { gap: "base", align: "center", children: [_jsx(TextInput, { errorMessage: `${t('householdItems.headers.itemName')} ${t('forms.required')}`, hasError: isEmptyField(name), id: id, handleChange: handleChange, placeholder: t('householdItems.headers.placeholder'), value: name }), name && (_jsx(Button, { variant: "secondary", maxW: "fit-content", maxH: "input.md", onClick: () => onSave(name), children: t('createDocument.buttons.save') }))] }) }));
 };

package/dist/interfaces/forms/ItemFormPanel/ItemFormFooter.interface.d.ts

@@ -0,0 +1,4 @@
+export interface FormFooterI {
+    onSave: () => void;
+    onCancel: () => void;
+}

package/dist/interfaces/forms/ItemFormPanel/ItemFormFooter.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/forms/ItemFormPanel/ItemFormPanel.interface.d.ts

@@ -0,0 +1,9 @@
+export interface ItemFormPanelI {
+    itemName?: string;
+    onClose: () => void;
+    onSaveItemName: (name: string) => void;
+    onSubmitForm: () => void;
+    panelIcon: string;
+    panelTitle: string;
+    showFooter?: boolean;
+}

package/dist/interfaces/forms/ItemFormPanel/ItemFormPanel.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/forms/ItemFormPanel/ItemFormTabImage.interface.d.ts

@@ -0,0 +1,12 @@
+import { ImageDBI } from '../..';
+export interface ItemFormTabImageI {
+    reportId?: string;
+    showHeader?: boolean;
+    isLoading?: boolean;
+    images?: ImageDBI[];
+    uploading?: boolean;
+    onDelete?: (imageId: string) => void;
+    onEdit?: (file: ImageDBI) => void;
+    onUpload?: (images: ImageDBI[]) => void;
+    onOpen?: () => void;
+}

package/dist/interfaces/forms/ItemFormPanel/ItemFormTabImage.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/forms/ItemFormPanel/ItemFormTabs.interface.d.ts

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

package/dist/interfaces/forms/ItemFormPanel/ItemFormTabs.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/forms/ItemFormPanel/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ItemFormFooter.interface';
+export * from './ItemFormPanel.interface';
+export * from './ItemFormTabImage.interface';
+export * from './ItemFormTabs.interface';

package/dist/interfaces/forms/ItemFormPanel/index.js

@@ -0,0 +1,4 @@
+export * from './ItemFormFooter.interface';
+export * from './ItemFormPanel.interface';
+export * from './ItemFormTabImage.interface';
+export * from './ItemFormTabs.interface';

package/dist/interfaces/forms/index.d.ts

@@ -1,4 +1,5 @@
 export * from './dynamicForm';
+export * from './ItemFormPanel';
 export * from './readOnly';
 export * from './Address.interface';
 export * from './BaseCounter.interface';

package/dist/interfaces/forms/index.js

@@ -1,4 +1,5 @@
 export * from './dynamicForm';
+export * from './ItemFormPanel';
 export * from './readOnly';
 export * from './Address.interface';
 export * from './BaseCounter.interface';

package/dist/interfaces/headers/ItemNameHeader.interface.d.ts

@@ -1,7 +1,6 @@
 export interface ItemNameHeaderI {
-    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     id?: string;
-    value: string;
-    handleSave: () => void;
+    value?: string;
+    onSave: (name: string) => void;
     padding?: string;
 }

package/dist/stories/contacts/ContactsContent.stories.js

@@ -7,6 +7,7 @@ export default {
     title: 'Components/Contacts',
     component: ContactsContent,
     args: {
+        onClick: action('onClick'),
         contacts: ContactsMock,
         menuItems: menuMock,
     },

package/dist/stories/forms/ItemFormPanel/ItemFormPanel.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ItemFormPanelI } from '../../../interfaces';
+declare const _default: Meta<ItemFormPanelI>;
+export default _default;
+export declare const ItemFormPanelComponent: (args: ItemFormPanelI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/forms/ItemFormPanel/ItemFormPanel.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ItemFormPanel, ItemFormTabs, RightPanel } from '../../../components';
+import { Paint } from '../../../assets/images/groups';
+import { action } from '@storybook/addon-actions';
+import { contactFieldsMock } from '../../../mocks';
+export default {
+    title: 'Components/Forms/ItemFormPanel',
+    component: ItemFormPanel,
+    args: {
+        itemName: 'Item Name',
+        panelIcon: Paint,
+        panelTitle: 'Item Form',
+        onClose: action('onClose'),
+        onSaveItemName: action('onSaveItemName'),
+        onSubmitForm: action('onSubmitForm'),
+    },
+};
+export const ItemFormPanelComponent = (args) => {
+    return (_jsx(RightPanel, { isOpen: true, onClose: () => null, children: _jsx(ItemFormPanel, Object.assign({}, args, { children: _jsx(ItemFormTabs, { form: contactFieldsMock }) })) }));
+};

package/dist/stories/forms/ItemFormPanel/ItemFormTabs.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ItemFormTabImageI } from '../../../interfaces';
+declare const _default: Meta<ItemFormTabImageI>;
+export default _default;
+export declare const ItemFormTabImageComponent: (args: ItemFormTabImageI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/forms/ItemFormPanel/ItemFormTabs.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ItemFormTabImage } from '../../../components';
+import { action } from '@storybook/addon-actions';
+import { DisplayFilesMock } from '../../../mocks';
+import { Box } from '@chakra-ui/react';
+export default {
+    title: 'Components/Forms/ItemFormPanel',
+    component: ItemFormTabImage,
+    args: {
+        images: DisplayFilesMock[0].files,
+        isLoading: false,
+        uploading: false,
+        onDelete: action('onDelete'),
+        onEdit: action('onEdit'),
+        onUpload: action('onUpload'),
+        onOpen: action('onOpen'),
+        reportId: '123',
+        showHeader: true,
+    },
+    decorators: [
+        (Story) => (_jsx(Box, { bg: "neutral.white", children: _jsx(Story, {}) })),
+    ],
+};
+export const ItemFormTabImageComponent = (args) => {
+    return _jsx(ItemFormTabImage, Object.assign({}, args));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.7.34",
+  "version": "2.8.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/forms/dynamicForm/ItemFormPanel/ItemFormFooter.tsx

@@ -0,0 +1,15 @@
+import { t } from 'i18next'
+import { FooterButtons } from '@/components'
+import { FormFooterI } from '@/interfaces'
+
+export const ItemFormFooter = ({ onSave, onCancel }: FormFooterI) => {
+  const buttonsFooter = {
+    button1: {
+      buttonStyle: 'primaryFooter',
+      label: t('buttons.save'),
+      onClick: onSave,
+    },
+  }
+
+  return <FooterButtons button1={buttonsFooter.button1} />
+}

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

@@ -0,0 +1,62 @@
+import { PropsWithChildren } from 'react'
+import {
+  DrawerBody,
+  DrawerHeader,
+  DrawerContent,
+  DrawerFooter,
+  Box,
+} from '@chakra-ui/react'
+import {
+  PanelHeader,
+  FooterDrawer,
+  ItemNameHeader,
+  ItemFormFooter,
+  Overlay,
+} from '@/components'
+import { ItemFormPanelI } from '@/interfaces'
+
+export const ItemFormPanel = ({
+  children,
+  itemName,
+  onClose,
+  onSaveItemName,
+  onSubmitForm,
+  panelIcon,
+  panelTitle,
+  showFooter = false,
+}: PropsWithChildren<ItemFormPanelI>) => {
+  return (
+    <DrawerContent bg="lightBlue.1" zIndex={4}>
+      <DrawerHeader p="0">
+        <PanelHeader
+          handleCloseButton={onClose}
+          icon={panelIcon}
+          title={panelTitle}
+        />
+      </DrawerHeader>
+
+      <DrawerBody padding="0" bg="lightBlue.1">
+        <ItemNameHeader
+          id="item-name"
+          onSave={onSaveItemName}
+          value={itemName}
+        />
+        <Box position="relative">
+          <Overlay
+            showOverlay={!itemName}
+            position="absolute"
+            w="inherit"
+            h="inherit"
+            zIndex="9"
+          />
+        </Box>
+        {children}
+      </DrawerBody>
+      <FooterDrawer isOpen={showFooter}>
+        <DrawerFooter w="100%">
+          <ItemFormFooter onSave={onSubmitForm} onCancel={onClose} />
+        </DrawerFooter>
+      </FooterDrawer>
+    </DrawerContent>
+  )
+}

package/src/components/forms/dynamicForm/ItemFormPanel/ItemFormTabImage.tsx

@@ -0,0 +1,35 @@
+import { Center, Text } from '@chakra-ui/react'
+import { AddMedia } from '@/components'
+import { ItemFormTabImageI } from '@/interfaces'
+
+export const ItemFormTabImage = ({
+  reportId = '',
+  showHeader = true,
+  isLoading = false,
+  images = [],
+  uploading = false,
+  onDelete = () => null,
+  onEdit = () => null,
+  onUpload = () => null,
+  onOpen = () => null,
+}: ItemFormTabImageI) => {
+  if (!reportId) {
+    return (
+      <Center h="300px">
+        <Text fontFamily="secondary">Please save form to add images.</Text>
+      </Center>
+    )
+  }
+  return (
+    <AddMedia
+      showHeader={showHeader}
+      loading={isLoading}
+      images={images}
+      uploading={uploading}
+      handleDelete={onDelete}
+      handleEdit={onEdit}
+      handleUpload={onUpload}
+      handleOpen={onOpen}
+    />
+  )
+}

package/src/components/forms/dynamicForm/ItemFormPanel/ItemFormTabs.tsx

@@ -0,0 +1,22 @@
+import { t } from 'i18next'
+import { Box } from '@chakra-ui/react'
+import { DynamicForm, TabsHeader, ItemFormTabImage } from '@/components'
+import { ItemFormTabsI } from '@/interfaces'
+
+export const ItemFormTabs = ({ form = [], ...props }: ItemFormTabsI) => {
+  const tabList = [
+    {
+      label: t('createDocument.tabs.tab1'),
+      component: (
+        <Box overflow="scroll" minH="100vh">
+          <DynamicForm form={form} />
+        </Box>
+      ),
+    },
+    {
+      label: t('createDocument.tabs.tab2'),
+      component: <ItemFormTabImage {...props} />,
+    },
+  ]
+  return <TabsHeader tabList={tabList} />
+}

package/src/components/forms/dynamicForm/ItemFormPanel/index.ts

@@ -0,0 +1,4 @@
+export * from './ItemFormFooter'
+export * from './ItemFormPanel'
+export * from './ItemFormTabImage'
+export * from './ItemFormTabs'

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

@@ -1,4 +1,5 @@
 export * from './fields'
+export * from './ItemFormPanel'
 export * from './DynamicForm'
 export * from './SimpleDynamicForm'
 export * from './HiddenField'

package/src/components/householdItems/ItemNameHeader.tsx

@@ -3,14 +3,18 @@ import { Box, Flex, Button } from '@chakra-ui/react'
 import { TextInput } from '@/components'
 import { isEmptyField } from '@/utils'
 import { ItemNameHeaderI } from '@/interfaces'
+import { useState } from 'react'
 
 export const ItemNameHeader = ({
   id = '',
-  handleChange,
-  value,
-  handleSave,
+  value = '',
+  onSave,
   padding = 'base',
 }: ItemNameHeaderI) => {
+  const [name, setName] = useState(value)
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value)
+  }
   return (
     <Box bg="lightBlue.2" p={padding} w="100%">
       <Flex gap="base" align="center">
@@ -18,18 +22,18 @@ export const ItemNameHeader = ({
           errorMessage={`${t('householdItems.headers.itemName')} ${t(
             'forms.required'
           )}`}
-          hasError={isEmptyField(value)}
+          hasError={isEmptyField(name)}
           id={id}
           handleChange={handleChange}
           placeholder={t('householdItems.headers.placeholder')}
-          value={value}
+          value={name}
         />
-        {value && (
+        {name && (
           <Button
             variant="secondary"
             maxW="fit-content"
             maxH="input.md"
-            onClick={handleSave}
+            onClick={() => onSave(name)}
           >
             {t('createDocument.buttons.save')}
           </Button>

package/src/interfaces/forms/ItemFormPanel/ItemFormFooter.interface.ts

@@ -0,0 +1,4 @@
+export interface FormFooterI {
+  onSave: () => void
+  onCancel: () => void
+}

package/src/interfaces/forms/ItemFormPanel/ItemFormPanel.interface.ts

@@ -0,0 +1,9 @@
+export interface ItemFormPanelI {
+  itemName?: string
+  onClose: () => void
+  onSaveItemName: (name: string) => void
+  onSubmitForm: () => void
+  panelIcon: string
+  panelTitle: string
+  showFooter?: boolean
+}

package/src/interfaces/forms/ItemFormPanel/ItemFormTabImage.interface.ts

@@ -0,0 +1,13 @@
+import { ImageDBI } from '@/interfaces'
+
+export interface ItemFormTabImageI {
+  reportId?: string
+  showHeader?: boolean
+  isLoading?: boolean
+  images?: ImageDBI[]
+  uploading?: boolean
+  onDelete?: (imageId: string) => void
+  onEdit?: (file: ImageDBI) => void
+  onUpload?: (images: ImageDBI[]) => void
+  onOpen?: () => void
+}

package/src/interfaces/forms/ItemFormPanel/ItemFormTabs.interface.ts

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

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

@@ -0,0 +1,4 @@
+export * from './ItemFormFooter.interface'
+export * from './ItemFormPanel.interface'
+export * from './ItemFormTabImage.interface'
+export * from './ItemFormTabs.interface'

package/src/interfaces/forms/index.ts

@@ -1,4 +1,5 @@
 export * from './dynamicForm'
+export * from './ItemFormPanel'
 export * from './readOnly'
 export * from './Address.interface'
 export * from './BaseCounter.interface'

package/src/interfaces/headers/ItemNameHeader.interface.ts

@@ -1,7 +1,6 @@
 export interface ItemNameHeaderI {
-  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void
   id?: string
-  value: string
-  handleSave: () => void
+  value?: string
+  onSave: (name: string) => void
   padding?: string
 }

package/src/stories/contacts/ContactsContent.stories.tsx

@@ -9,6 +9,7 @@ export default {
   title: 'Components/Contacts',
   component: ContactsContent,
   args: {
+    onClick: action('onClick'),
     contacts: ContactsMock,
     menuItems: menuMock,
   },

package/src/stories/forms/ItemFormPanel/ItemFormPanel.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/react'
+import { ItemFormPanel, ItemFormTabs, RightPanel } from '@/components'
+import { ItemFormPanelI } from '@/interfaces'
+import { Paint } from '@/assets/images/groups'
+import { action } from '@storybook/addon-actions'
+import { contactFieldsMock } from '@/mocks'
+
+export default {
+  title: 'Components/Forms/ItemFormPanel',
+  component: ItemFormPanel,
+  args: {
+    itemName: 'Item Name',
+    panelIcon: Paint,
+    panelTitle: 'Item Form',
+    onClose: action('onClose'),
+    onSaveItemName: action('onSaveItemName'),
+    onSubmitForm: action('onSubmitForm'),
+  },
+} as Meta<ItemFormPanelI>
+
+export const ItemFormPanelComponent = (args: ItemFormPanelI) => {
+  return (
+    <RightPanel isOpen onClose={() => null}>
+      <ItemFormPanel {...args}>
+        <ItemFormTabs form={contactFieldsMock} />
+      </ItemFormPanel>
+    </RightPanel>
+  )
+}

package/src/stories/forms/ItemFormPanel/ItemFormTabs.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/react'
+import { ItemFormTabImage } from '@/components'
+import { ItemFormTabImageI } from '@/interfaces'
+import { action } from '@storybook/addon-actions'
+import { DisplayFilesMock } from '@/mocks'
+import { Box } from '@chakra-ui/react'
+
+export default {
+  title: 'Components/Forms/ItemFormPanel',
+  component: ItemFormTabImage,
+  args: {
+    images: DisplayFilesMock[0].files,
+    isLoading: false,
+    uploading: false,
+    onDelete: action('onDelete'),
+    onEdit: action('onEdit'),
+    onUpload: action('onUpload'),
+    onOpen: action('onOpen'),
+    reportId: '123',
+    showHeader: true,
+  },
+  decorators: [
+    (Story: any) => (
+      <Box bg="neutral.white">
+        <Story />
+      </Box>
+    ),
+  ],
+} as Meta<ItemFormTabImageI>
+
+export const ItemFormTabImageComponent = (args: ItemFormTabImageI) => {
+  return <ItemFormTabImage {...args} />
+}

package/src/stories/householdItems/AddHomeItemHeader.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta } from '@storybook/react'
 import { AddHomeItemHeader } from '@/components'
 import { ItemNameHeaderI, CreateHouseholdItemHeaderI } from '@/interfaces'
-import { action } from '@storybook/addon-actions'
 import { RoomsList, SelectGroups } from '@/helpers'
 import { Box } from '@chakra-ui/react'