chore: add stories for TableEmpty and TableLoader (#12373)

site/src/components/EmptyState/EmptyState.tsx

@@ -1,12 +1,11 @@
-import type { FC, ReactNode } from "react";
+import type { FC, HTMLAttributes, ReactNode } from "react";
 
-export interface EmptyStateProps {
+export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
   /** Text Message to display, placed inside Typography component */
   message: string;
   /** Longer optional description to display below the message */
   description?: string | ReactNode;
   cta?: ReactNode;
-  className?: string;
   image?: ReactNode;
 }
 

site/src/components/TableEmpty/TableEmpty.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableContainer from "@mui/material/TableContainer";
+import { CodeExample } from "components/CodeExample/CodeExample";
+import { TableEmpty } from "./TableEmpty";
+
+const meta: Meta<typeof TableEmpty> = {
+  title: "components/TableEmpty",
+  component: TableEmpty,
+  args: {
+    message: "Unfortunately, there's a radio connected to my brain",
+  },
+  decorators: [
+    (Story) => (
+      <TableContainer>
+        <Table>
+          <TableBody>
+            <Story />
+          </TableBody>
+        </Table>
+      </TableContainer>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof TableEmpty>;
+
+export const Example: Story = {};
+
+export const WithImageAndCta: Story = {
+  name: "With Image and CTA",
+  args: {
+    description: "A gruff voice crackles to life on the intercom.",
+    cta: (
+      <CodeExample
+        secret={false}
+        code="say &ldquo;Actually, it's the BBC controlling us from London&rdquo;"
+      />
+    ),
+    image: (
+      <img
+        src="/featured/templates.webp"
+        alt=""
+        css={{
+          maxWidth: 800,
+          height: 320,
+          overflow: "hidden",
+          objectFit: "cover",
+          objectPosition: "top",
+        }}
+      />
+    ),
+    style: { paddingBottom: 0 },
+  },
+};

site/src/components/TableLoader/TableLoader.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableContainer from "@mui/material/TableContainer";
+import { TableLoader } from "./TableLoader";
+
+const meta: Meta<typeof TableLoader> = {
+  title: "components/TableLoader",
+  component: TableLoader,
+  decorators: [
+    (Story) => (
+      <TableContainer>
+        <Table>
+          <TableBody>
+            <Story />
+          </TableBody>
+        </Table>
+      </TableContainer>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof TableLoader>;
+
+export const Example: Story = {};
+export { Example as TableLoader };