Add more stories

src/molviewer--ligandviewer.stories.tsx

@@ -0,0 +1,40 @@
+import { Story, action } from "@ladle/react";
+
+import { useEffect, useState } from "react";
+import { LigandViewer } from "./molviewer";
+
+export const Default: Story<{
+	code: string;
+	chain: string;
+	resno: number;
+}> = ({ code, chain, resno }) => {
+	const [structure, setStructure] = useState<File | undefined>(undefined);
+	useEffect(() => {
+		fetch(`https://files.rcsb.org/download/${code}.pdb`)
+			.then((response) => response.blob())
+			.then((blob) =>
+				setStructure(
+					new File([blob], `${code}.pdb`, { type: "chemical/x-pdb" }),
+				),
+			);
+	}, [code]);
+	if (!structure) return null;
+	return (
+		<LigandViewer
+			structure={structure}
+			selected={{
+				chain,
+				resno,
+				resname: "",
+			}}
+			highlight={undefined}
+			onHover={action("hover")}
+			onPick={action("pick")}
+		/>
+	);
+};
+Default.args = {
+	code: "2YA8",
+	chain: "B",
+	resno: 1777,
+};

src/molviewer--simpleviewer.stories.tsx

@@ -3,6 +3,4 @@ import { Story } from "@ladle/react";
 import { SimpleViewer } from "./molviewer";
 import { structure } from "./structure";
 
-// TODO make dark mode aware
-
 export const Default: Story = () => <SimpleViewer structure={structure} />;

src/molviewer--viewer.stories.tsx

@@ -0,0 +1,29 @@
+import { Story } from "@ladle/react";
+import { Viewer } from "./molviewer";
+import { structure } from "./structure";
+
+export const Default: Story = () => {
+	return (
+		<Viewer
+			structure={structure}
+			chain="A"
+			active={[932, 935, 936, 949, 950, 952, 958]}
+			passive={[970]}
+			surface={[]}
+		/>
+	);
+};
+
+export const BallStick: Story = () => {
+	return (
+		<Viewer
+			structure={structure}
+			chain="A"
+			renderSelectionAs="ball+stick"
+			active={[950]}
+			passive={[932, 935, 936, 949, 952, 958]}
+			higlightResidue={971}
+			surface={[972]}
+		/>
+	);
+};