+ props.onSearch(e.target.value)}
+ />
+
+
+ {props.status === 'pending' ? (
+
+ Loading...
+ ) : props.status === 'error' ? ( + Error: {props.error?.message} + ) : ( +
+ {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+ const isLoaderRow = virtualRow.index > allUsers.length - 1
+ const user = allUsers[virtualRow.index];
+ return (
+
+ )}
+
+ {user === undefined ? (
+ isLoaderRow
+ ? props.hasNextPage
+ ? 'Loading more...'
+ : null
+ : 'No items found'
+ ) : (
+
+ )}
+
+ )
+ })}
+
+ {props.item === undefined ? (
+ props.isLoaderRow
+ ? props.hasMore
+ ? (
+
+ {props.children}
+
+
+ )
+ : null
+ : 'No items found'
+ ) : (
+ Loading...
+
+
+ )}
+
+
+
+
+
+ 
+
+
+
+ Serial Number: {props.item.serial}
+Manufacturer: {props.item.manufacturer}
++ Status: + + {textByStatus[props.item.status]} + +
+Specification: {props.item.specifications}
+
+
+ Purchased on: + {Intl.DateTimeFormat('en-US').format(new Date(props.item.purchaseDate as string))} +
+Warranty until: + + {Intl.DateTimeFormat('en-US').format(new Date(props.item.warrantyExpiryDate as string))} + +
+Assigned on: + {props.item?.user ? `${props.item?.user?.firstName} ${props.item?.user?.lastName}` : ( + No person assigned + )} +
+Assigned to: + {props.item?.user ? `${props.item?.user?.firstName} ${props.item?.user?.lastName}` : ( + No person assigned + )} +
+
+
+
+
+
+
+ {props.status === 'pending' ? (
+
+ );
+}
\ No newline at end of file
diff --git a/examples/with-code-share/apps/client/src/components/Items/Items.stories.tsx b/examples/with-code-share/apps/client/src/components/Items/Items.stories.tsx
new file mode 100644
index 00000000..34a32b71
--- /dev/null
+++ b/examples/with-code-share/apps/client/src/components/Items/Items.stories.tsx
@@ -0,0 +1,113 @@
+import { ComponentProps, useMemo, useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ArrayInventoryOutput, mockInventory, mockUsers } from 'shared';
+
+import ItemsLayout from "./Items.layout";
+import useGetMockedDataLikeReactInfiniteQuery from "../../hooks/usegetMockedDataLikeReactInfiniteQuery";
+import ItemLayout from "../Item/Item.layout";
+import ItemsFormLayout from "../ItemsForm/ItemsForm.layout";
+import { MutationErrors } from "../../utils";
+import { Wrapper as WrapperForAssignForm } from "../AssignForm/AssignForm.mock";
+
+const WrapperForItem = (props: {
+ key: number | string;
+} & ComponentPropsLoading...
+ ) : props.status === 'error' ? ( + Error: {props.error?.message} + ) : ( +
+ {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+ const isLoaderRow = virtualRow.index > allRows.length - 1
+ const item = allRows[virtualRow.index];
+ return props.onRenderItem(virtualRow.index,{
+ item,
+ isLoaderRow,
+ virtualRow,
+ hasMore: props.hasNextPage
+ })
+ })}
+
+ )}
+
+ (
+ {}}
+ onOpenEdit={() => {}}
+ onRemove={() => {
+ alert('Removing item')
+ }}
+ />
+ )}
+ />
+
+ );
+};
+
+
+
+const meta = {
+ title: "Components/Items",
+ component: Wrapper,
+} satisfies Meta