adding monkeytype

frontend/storybook/stories/AsyncContent.stories.tsx

@@ -0,0 +1,80 @@
+import preview from "#.storybook/preview";
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from "@tanstack/solid-query";
+
+import AsyncContent from "../../src/ts/components/common/AsyncContent";
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+});
+
+const meta = preview.meta({
+  title: "Common/AsyncContent",
+  // oxlint-disable-next-line typescript/no-unsafe-assignment -- generic component
+  component: AsyncContent as unknown as () => ReturnType<typeof AsyncContent>,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={queryClient}>
+        <Story />
+      </QueryClientProvider>
+    ),
+  ],
+});
+
+function LoadingExample(): ReturnType<typeof AsyncContent> {
+  const query = useQuery(() => ({
+    queryKey: ["storybook-loading"],
+    queryFn: async () => new Promise<string>(() => undefined),
+  }));
+
+  return (
+    <AsyncContent query={query}>{(data) => <div>{data}</div>}</AsyncContent>
+  );
+}
+
+function SuccessExample(): ReturnType<typeof AsyncContent> {
+  const query = useQuery(() => ({
+    queryKey: ["storybook-success"],
+    queryFn: async () => "Hello World",
+  }));
+
+  return (
+    <AsyncContent query={query}>
+      {(data) => <div style={{ color: "var(--text-color)" }}>{data}</div>}
+    </AsyncContent>
+  );
+}
+
+function ErrorExample(): ReturnType<typeof AsyncContent> {
+  const query = useQuery(() => ({
+    queryKey: ["storybook-error"],
+    queryFn: async () => {
+      throw new globalThis.Error("Failed to fetch");
+    },
+  }));
+
+  return (
+    <AsyncContent query={query} errorMessage="Could not load data">
+      {() => <div>This won't render</div>}
+    </AsyncContent>
+  );
+}
+
+export const Loading = meta.story({
+  render: () => <LoadingExample />,
+});
+
+export const Success = meta.story({
+  render: () => <SuccessExample />,
+});
+
+export const WithError = meta.story({
+  render: () => <ErrorExample />,
+});