From ff08ac59f4fbcf2497d5e79d696a96f142488a94 Mon Sep 17 00:00:00 2001
From: trevor-anderson <trevor@nerdware.cloud>
Date: Tue, 20 Feb 2024 11:12:31 -0500
Subject: [PATCH] build: add DataGrid Storybook stories

---
 src/components/DataGrid/DataGrid.stories.tsx | 73 ++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/components/DataGrid/DataGrid.stories.tsx

diff --git a/src/components/DataGrid/DataGrid.stories.tsx b/src/components/DataGrid/DataGrid.stories.tsx
new file mode 100644
index 00000000..9f5b249f
--- /dev/null
+++ b/src/components/DataGrid/DataGrid.stories.tsx
@@ -0,0 +1,73 @@
+import Box from "@mui/material/Box";
+import ConstructionIcon from "@mui/icons-material/Construction";
+import { withNavDecorator, type NavDecoratorArgs } from "@/../.storybook/decorators";
+import { TABLE_VIEW_DATA_SETS } from "@/layouts/CoreItemsListView/types";
+import {
+  workOrderTableProps,
+  type WorkOrderTableRowData,
+} from "@/pages/WorkOrdersListView/tableProps";
+import { MOCK_WORK_ORDERS } from "@/tests/mockItems";
+import { DataGrid, type DataGridProps } from "./DataGrid";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/DataGrid",
+  component: DataGrid<WorkOrderTableRowData>,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+  decorators: [
+    (Story) => (
+      <Box
+        sx={{
+          margin: "1rem",
+          display: "flex",
+          height: "90vh",
+          minHeight: "21rem", // 336px
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Story />
+      </Box>
+    ),
+    withNavDecorator,
+  ],
+  args: {
+    /* DataGrid requires its parent node to have explicit dimensions (not %-based), but
+    sometimes the Storybook rendering process yields a DataGrid before its Box-decorator-parent
+    is rendered with known dimensions, so `logLevel` is false here to silence those warnings.*/
+    logLevel: false,
+  },
+} satisfies Meta<DataGridProps<WorkOrderTableRowData>>;
+
+export default meta;
+
+///////////////////////////////////////////////////////////
+// STORIES
+
+export const WorkOrdersDemo = {
+  args: {
+    ...workOrderTableProps,
+    rowDataItemName: "Work Orders",
+    backgroundIcon: <ConstructionIcon />,
+    rows: [
+      ...MOCK_WORK_ORDERS.myWorkOrders.createdByUser.map((wo) => ({
+        dataSet: TABLE_VIEW_DATA_SETS.SENT,
+        ...wo,
+      })),
+      ...MOCK_WORK_ORDERS.myWorkOrders.assignedToUser.map((wo) => ({
+        dataSet: TABLE_VIEW_DATA_SETS.RECEIVED,
+        ...wo,
+      })),
+    ],
+  },
+} satisfies StoryObj<typeof meta & NavDecoratorArgs>;
+
+export const Empty = {
+  args: {
+    ...WorkOrdersDemo.args,
+    rows: [],
+  },
+} satisfies StoryObj<typeof meta>;