81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
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 />,
|
|
});
|