<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import IssueBody from "./IssueBody.svelte";

	// normally produced by $lib/markup (sanitised); inlined here for the story
	const sampleHtml = `<p>I'd like a <code>/trending</code> view that shows more than the five repositories currently listed in the timeline sidebar.</p>
<ul><li>discover active projects</li><li>understand what's happening</li></ul>
<pre><code>curl https://tangled.org/trending</code></pre>`;

	const { Story } = defineMeta({
		title: "Repo/Issues/IssueBody",
		component: IssueBody,
		tags: ["autodocs"],
		argTypes: {
			body: { control: "text" },
			bodyHtml: { control: "text" }
		},
		args: {
			body: "I'd like a `/trending` view.",
			bodyHtml: sampleHtml
		}
	});
</script>

<!-- rendered markdown (bodyHtml present) -->
<Story name="Rendered" />

<!-- fallback to raw source when rendering was skipped (body too large / null html) -->
<Story
	name="Plain fallback"
	args={{ body: "raw markdown that was not rendered\n\n- item one\n- item two", bodyHtml: null }}
/>

<!-- empty body renders nothing -->
<Story name="Empty" args={{ body: "", bodyHtml: null }} />
