@homefile/components-v2 1.0.0

package/src/stories/rooms/AddItemImage.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { AddItemImage } from '@/components'
+
+export default {
+  title: 'Components/Rooms',
+  component: AddItemImage,
+} as Meta
+
+const AddItemImageComponent: typeof AddItemImage = (args) => {
+  return (
+    <Box p="4rem" w="fit-content" bg="white">
+      <AddItemImage {...args} />
+    </Box>
+  )
+}

package/src/stories/rooms/GroupCard.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/react'
+import { GroupCard } from '@/components'
+import { PaintItems } from '@/helpers'
+import { GroupCardI } from '@/interfaces'
+
+export default {
+  title: 'Components/Rooms',
+  component: GroupCard,
+} as Meta<GroupCardI>
+
+export const GroupCardComponent = (args: GroupCardI) => {
+  return <GroupCard {...args} />
+}
+
+GroupCardComponent.args = {
+  items: PaintItems,
+  menuItems: [{ label: 'Delete Group', handleClick: () => null }],
+  title: 'Paints & Stains',
+  totalAmount: 98076,
+  firstFilterItems: ['All', 'Paints', 'Stains'],
+  secondFilterItems: ['All', 'Interior', 'Exterior'],
+}

package/src/stories/rooms/GroupCardHeader.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { GroupCardHeader } from '@/components'
+import { GroupCardHeaderI } from '@/interfaces'
+
+export default {
+  title: 'Components/Rooms',
+  component: GroupCardHeader,
+} as Meta<GroupCardHeaderI>
+
+export const GroupCardHeaderComponent = (args: GroupCardHeaderI) => {
+  return (
+    <Box w="40rem">
+      <GroupCardHeader {...args} />
+    </Box>
+  )
+}
+
+GroupCardHeaderComponent.args = {
+  title: 'Paints & Stains',
+  totalAmount: '$ 4,000.00',
+  menuItems: [],
+}

package/src/stories/rooms/GroupContent.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/react'
+import { GroupContent, RightPanel } from '@/components'
+import { Groups } from '@/helpers'
+import { GroupContentI } from '@/interfaces'
+
+export default {
+  title: 'Components/Rooms',
+  component: GroupContent,
+} as Meta<GroupContentI>
+
+export const GroupContentComponent = (args: GroupContentI) => {
+  return (
+    <RightPanel
+      size="xs"
+      isOpen
+      onClose={() => null}
+      children={<GroupContent {...args} />}
+    />
+  )
+}
+
+GroupContentComponent.args = {
+  groupList: Groups,
+}

package/src/stories/rooms/GroupOptionCard.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { GroupOptionCard } from '@/components'
+import { Groups } from '@/helpers'
+import { GroupOptionCardI } from '@/interfaces'
+
+export default {
+  title: 'Components/Rooms',
+  component: GroupOptionCard,
+} as Meta<GroupOptionCardI>
+
+export const GroupOptionCardComponent = (args: GroupOptionCardI) => {
+  return (
+    <Box w="20rem">
+      <GroupOptionCard {...args} />
+    </Box>
+  )
+}
+
+GroupOptionCardComponent.args = {
+  group: Groups[5],
+}

package/src/stories/rooms/GroupsContainer.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/react'
+import { GroupCard, GroupsContainer } from '@/components'
+
+export default {
+  title: 'Components/Rooms',
+  component: GroupsContainer,
+} as Meta
+
+export const GroupsContainerComponent = () => {
+  return (
+    <GroupsContainer>
+      <GroupCard
+        items={[]}
+        onAddItem={() => null}
+        title="Small Appliances"
+        totalAmount="34590"
+        onAddImage={() => null}
+        onClickDelete={() => null}
+        onClickDetails={() => null}
+        firstFilterItems={[]}
+        onFirstFilterClick={() => null}
+        onSave={() => null}
+        secondFilterItems={[]}
+        onMove={() => null}
+      />
+      <GroupCard
+        items={[]}
+        onAddItem={() => null}
+        title="Furniture"
+        totalAmount="67500"
+        onAddImage={() => null}
+        onClickDelete={() => null}
+        onClickDetails={() => null}
+        firstFilterItems={[]}
+        onFirstFilterClick={() => null}
+        onSave={() => null}
+        secondFilterItems={[]}
+        onMove={() => null}
+      />
+    </GroupsContainer>
+  )
+}

package/src/stories/rooms/GroupsHeader.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/react'
+import { GroupsHeader } from '@/components'
+import { Groups } from '@/helpers'
+import { GroupsHeaderI } from '@/interfaces'
+
+export default {
+  title: 'Components/Rooms',
+  component: GroupsHeader,
+} as Meta<GroupsHeaderI>
+
+export const GroupsHeaderComponent = (args: GroupsHeaderI) => {
+  return <GroupsHeader {...args} />
+}
+
+GroupsHeaderComponent.args = {
+  groupList: Groups,
+}

package/src/stories/rooms/ItemCard.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/react'
+import { ItemCard } from '@/components'
+import { ItemCardI } from '@/interfaces'
+
+export default {
+  title: 'Components/Rooms',
+  component: ItemCard,
+} as Meta<ItemCardI>
+
+export const ItemCardComponent = (args: ItemCardI) => {
+  return <ItemCard {...args} />
+}
+
+ItemCardComponent.args = {
+  title: 'Wall Color with long name',
+  brandLabel: 'Behr',
+  onClickDetails: (id: string) => {
+    console.log(id)
+  },
+  firstFilterItems: ['All', 'Paints', 'Stains'],
+  secondFilterItems: ['All', 'Interior', 'Exterior'],
+}

package/src/stories/rooms/NewRoomPanel.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/react'
+import { NewRoomPanel, LeftPanel } from '@/components'
+import { RoomsToAdd } from '@/helpers'
+import { NewRoomPanelI } from '@/interfaces'
+
+export default {
+  title: 'Components/Rooms',
+  component: NewRoomPanel,
+} as Meta<NewRoomPanelI>
+
+export const NewRoomPanelComponent = (args: NewRoomPanelI) => {
+  return (
+    <LeftPanel
+      size="xs"
+      isOpen
+      onClose={() => null}
+      children={<NewRoomPanel {...args} />}
+    />
+  )
+}
+
+NewRoomPanelComponent.args = {
+  rooms: RoomsToAdd,
+}

package/src/stories/rooms/RoomCard.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { RoomCard } from '@/components'
+import { RoomsList } from '@/helpers'
+import { RoomCardI } from '@/interfaces'
+
+export default {
+  title: 'Components/Rooms',
+  component: RoomCard,
+} as Meta<RoomCardI>
+
+export const RoomCardComponent = (args: RoomCardI) => {
+  return (
+    <Box w="20rem">
+      <RoomCard {...args} />
+    </Box>
+  )
+}
+
+const room = RoomsList[0]
+RoomCardComponent.args = {
+  room,
+  index: 0,
+}

package/src/stories/rooms/RoomHeader.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { RoomHeader } from '@/components'
+import { RoomsList } from '@/helpers'
+import { RoomHeaderI } from '@/interfaces'
+
+export default {
+  title: 'Components/Rooms',
+  component: RoomHeader,
+} as Meta<RoomHeaderI>
+
+export const RoomHeaderComponent = (args: RoomHeaderI) => {
+  return (
+    <Box bg="white" p="base">
+      <RoomHeader {...args} />
+    </Box>
+  )
+}
+
+const roomValue = 0
+
+const room = RoomsList[1]
+RoomHeaderComponent.args = {
+  room,
+  roomAmount: roomValue.toString(),
+}

package/src/stories/rooms/RoomVideo.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/react'
+import { RoomVideo } from '@/components'
+import { Box } from '@chakra-ui/react'
+import { RoomVideoI } from '@/interfaces'
+import { DisplayFilesMock, menuMock } from '@/mocks'
+import { action } from '@storybook/addon-actions'
+
+export default {
+  title: 'Components/Rooms',
+  component: RoomVideo,
+  args: {
+    files: [],
+    loading: false,
+    menuItems: menuMock,
+    onDelete: action('onDelete'),
+    onPlay: action('onPlay'),
+    onFilesChange: action('onFilesChange'),
+    onUpload: action('onUpload'),
+    uploading: false,
+  },
+  decorators: [
+    (Story) => (
+      <Box w={['full', '324px']}>
+        <Story />
+      </Box>
+    ),
+  ],
+} as Meta
+
+export const RoomVideoComponent = (args: RoomVideoI) => {
+  return <RoomVideo {...args} />
+}
+
+export const RoomVideoWithVideosComponent = (args: RoomVideoI) => {
+  return <RoomVideo {...args} files={DisplayFilesMock} />
+}

package/src/stories/rooms/RoomsBoard.stories.tsx

@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/react'
+import { RoomsBoard } from '@/components'
+
+export default {
+  title: 'Pages/RoomsBoard',
+  component: RoomsBoard,
+} as Meta
+
+export const RoomsBoardComponent = () => {
+  return <RoomsBoard />
+}

package/src/stories/rooms/RoomsMenu.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/react'
+import { RoomsMenu } from '@/components'
+import { RoomsList, RoomsToAdd } from '@/helpers'
+import { RoomsMenuI } from '@/interfaces'
+
+export default {
+  title: 'Components/Rooms',
+  component: RoomsMenu,
+} as Meta<RoomsMenuI>
+
+export const RoomsMenuComponent = (args: RoomsMenuI) => {
+  return <RoomsMenu {...args} />
+}
+
+RoomsMenuComponent.args = {
+  activeRoom: RoomsList[0].name,
+  rooms: RoomsList,
+  roomsToAdd: RoomsToAdd,
+}

package/src/stories/rooms/RoomsMenuMobile.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/react'
+import { RoomsMenuMobile } from '@/components'
+import { RoomsList, RoomsToAdd } from '@/helpers'
+import { RoomsMenuI } from '@/interfaces'
+
+export default {
+  title: 'Components/Rooms',
+  component: RoomsMenuMobile,
+} as Meta<RoomsMenuI>
+
+export const RoomsMenuMobileComponent = (args: RoomsMenuI) => {
+  return <RoomsMenuMobile {...args} />
+}
+
+RoomsMenuMobileComponent.args = {
+  activeRoom: RoomsList[0].name,
+  rooms: RoomsList,
+  roomsToAdd: RoomsToAdd,
+}
+
+RoomsMenuMobileComponent.parameters = {
+  viewport: {
+    defaultViewport: 'iphone6',
+  },
+}

package/src/stories/sendDocument/AddMedia.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { AddMedia } from '@/components'
+import { imagesDb } from '@/helpers'
+import { AddMediaI } from '@/interfaces'
+
+export default {
+  title: 'Components/SendDocument',
+  component: AddMedia,
+} as Meta<AddMediaI>
+
+export const AddMediaComponent = (args: AddMediaI) => {
+  return (
+    <Box w={['full', 'md']}>
+      <AddMedia {...args} />
+    </Box>
+  )
+}
+
+AddMediaComponent.args = {
+  images: imagesDb,
+  uploading: false,
+  handleUpload: () => null,
+}
+
+export const AddMediaWithoutMedia = (args: AddMediaI) => (
+  <AddMediaComponent {...args} />
+)
+AddMediaWithoutMedia.args = {
+  images: [],
+  uploading: false,
+  handleUpload: () => null,
+  dropAreaHeight: 'calc(100vh - 23rem)',
+}

package/src/stories/sendDocument/CreateDocumentContent.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/react'
+import { Drawer } from '@chakra-ui/react'
+import { CreateDocumentContent } from '@/components'
+import { CreateDocumentContentI } from '@/interfaces'
+
+export default {
+  title: 'Components/SendDocument',
+  component: CreateDocumentContent,
+} as Meta<CreateDocumentContentI>
+
+export const CreateDocumentContentComponent = (
+  args: CreateDocumentContentI
+) => {
+  return (
+    <Drawer placement="right" onClose={() => null} isOpen size="md">
+      <CreateDocumentContent {...args} />
+    </Drawer>
+  )
+}
+
+CreateDocumentContentComponent.args = {
+  initialHome: 'The Edmunds',
+  homes: [
+    {
+      _id: '1',
+      name: 'The Smiths',
+    },
+  ],
+}

package/src/stories/sendDocument/CreateDocumentHeader.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { CreateDocumentHeader } from '@/components'
+import { SelectHomes } from '@/helpers'
+import { CreateDocumentHeaderI } from '@/interfaces'
+
+export default {
+  title: 'Components/SendDocument',
+  component: CreateDocumentHeader,
+} as Meta<CreateDocumentHeaderI>
+
+export const CreateDocumentHeaderComponent = (args: CreateDocumentHeaderI) => {
+  return (
+    <Box w="fit-content" bg="white" p="base">
+      <CreateDocumentHeader {...args} />
+    </Box>
+  )
+}
+
+CreateDocumentHeaderComponent.args = {
+  homes: SelectHomes,
+  initialHome: SelectHomes[0].name,
+  handleDateRange: () => null,
+}

package/src/stories/sendDocument/DocumentDetailsTab.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { DocumentDetailsTab } from '@/components'
+
+export default {
+  title: 'Components/SendDocument',
+  component: DocumentDetailsTab,
+} as Meta
+
+export const DocumentDetailsTabComponent = () => {
+  return (
+    <Box w={['full', 'md']}>
+      <DocumentDetailsTab />
+    </Box>
+  )
+}

package/src/stories/sendDocument/DocumentNameHeader.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { DocumentNameHeader } from '@/components'
+import { DocumentNameHeaderI } from '@/interfaces'
+
+export default {
+  title: 'Components/SendDocument',
+  component: DocumentNameHeader,
+} as Meta<DocumentNameHeaderI>
+
+export const DocumentNameHeaderComponent = (args: DocumentNameHeaderI) => {
+  return (
+    <Box w={["full","60%"]} bg="white" p="base">
+      <DocumentNameHeader {...args} />
+    </Box>
+  )
+}
+
+DocumentNameHeaderComponent.args = {
+  value: 'Progress Report  - Jan 12-16 2022',
+}

package/src/stories/sendDocument/DocumentPreview.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/react'
+import { Drawer } from '@chakra-ui/react'
+import { DocumentPreview } from '@/components'
+import { documentDB } from '@/helpers'
+import { DocumentPreviewI } from '@/interfaces'
+
+export default {
+  title: 'Components/SendDocument',
+  component: DocumentPreview,
+} as Meta<DocumentPreviewI>
+
+export const DocumentPreviewComponent = (args: DocumentPreviewI) => {
+  return (
+    <Drawer placement="left" onClose={() => null} isOpen={true} size="md">
+      <DocumentPreview {...args} />
+    </Drawer>
+  )
+}
+
+const { companyInfo, date, document, form, home, images, userInfo } = documentDB
+
+DocumentPreviewComponent.args = {
+  companyInfo,
+  date,
+  document,
+  form,
+  home,
+  images,
+  userInfo,
+}

package/src/stories/sendDocument/InputOrText.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { InputOrText } from '@/components'
+import { InputOrTextI } from '@/interfaces'
+
+export default {
+  title: 'Components/SendDocument',
+  component: InputOrText,
+} as Meta<InputOrTextI>
+
+export const InputOrTextComponent = (args: InputOrTextI) => {
+  return (
+    <Box w={["full","60%"]} bg="white" p="base">
+      <InputOrText {...args} />
+    </Box>
+  )
+}
+
+InputOrTextComponent.args = {
+  value: 'Progress Report  - Jan 12-16 2022',
+}

package/src/stories/sendDocument/RecipientCard.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { RecipientCard } from '@/components'
+import { recipientsDb } from '@/helpers'
+import { RecipientCardI } from '@/interfaces'
+
+export default {
+  title: 'Components/SendDocument',
+  component: RecipientCard,
+} as Meta<RecipientCardI>
+
+export const RecipientCardComponent = (args: RecipientCardI) => {
+  return (
+    <Box bg="white" p="base" w={['full', 'md']}>
+      <RecipientCard {...args} />
+    </Box>
+  )
+}
+
+RecipientCardComponent.args = {
+  hasTitle: true,
+  index: 1,
+  isDocument: false,
+  recipient: recipientsDb[0],
+}

package/src/stories/sendDocument/RecipientContent.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { RecipientContent } from '@/components'
+import { recipientsDb } from '@/helpers'
+import { RecipientContentI } from '@/interfaces'
+
+export default {
+  title: 'Components/SendDocument',
+  component: RecipientContent,
+} as Meta<RecipientContentI>
+
+export const RecipientContentComponent = (args: RecipientContentI) => {
+  return (
+    <Box bg="white" p="base" w={['full', 'md']}>
+      <RecipientContent {...args} />
+    </Box>
+  )
+}
+
+const {
+  user: { email, firstName, lastName, phone },
+} = recipientsDb[0]
+
+RecipientContentComponent.args = {
+  email,
+  firstName,
+  lastName,
+  phone,
+}

package/src/stories/sendDocument/RecipientDocForm.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { RecipientDocForm } from '@/components'
+import { recipientsDb } from '@/helpers'
+import { RecipientDocFormI } from '@/interfaces'
+
+export default {
+  title: 'Components/SendDocument',
+  component: RecipientDocForm,
+} as Meta<RecipientDocFormI>
+
+export const RecipientDocFormComponent = (args: RecipientDocFormI) => {
+  return (
+    <Box bg="white" p="base" w={['full', 'md']}>
+      <RecipientDocForm {...args} />
+    </Box>
+  )
+}
+
+RecipientDocFormComponent.args = {
+  recipients: recipientsDb,
+}

package/src/stories/sendDocument/RecipientForm.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/react'
+import { Box, Flex } from '@chakra-ui/react'
+import { RecipientForm } from '@/components'
+import { RecipientFormI } from '@/interfaces'
+
+export default {
+  title: 'Components/SendDocument',
+  component: RecipientForm,
+} as Meta<RecipientFormI>
+
+export const RecipientFormComponent = (args: RecipientFormI) => {
+  return (
+    <Flex justify="flex-end">
+      <Box w={["full","fit-content"]} bg="white" p="base">
+        <RecipientForm {...args} />
+      </Box>
+    </Flex>
+  )
+}

package/src/stories/sendDocument/RecipientHeader.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { RecipientHeader } from '@/components'
+import { RecipientHeaderI } from '@/interfaces'
+
+export default {
+  title: 'Components/SendDocument',
+  component: RecipientHeader,
+} as Meta<RecipientHeaderI>
+
+export const RecipientHeaderComponent = (args: RecipientHeaderI) => {
+  return (
+    <Box bg="white" p="base" w={['full', 'md']}>
+      <RecipientHeader {...args} />
+    </Box>
+  )
+}
+
+RecipientHeaderComponent.args = {
+  accountType: 'Contributor',
+  isDocument: false,
+}