Hii, I am trying to get Storybook working with my Svelte components nicely, but I can't seem to get props inferred properly for using with args. I've tried multiple different examples I've found from googling but this is what I have atm.
My problems are:
- in the
renderfunction,argsis inferred as any - I get no autocomplete on
argsin the meta or story def
(I also tried satisfies Meta<typeof Toast> as per some docs, though I get an error saying that id isn't assignable to args at all)
Toast.stories.ts
import { action } from "@storybook/addon-actions";
import type { Meta, StoryObj } from "@storybook/svelte";
import Toast from "./Toast.svelte";
const meta = {
component: Toast,
tags: ["autodocs"],
args: {
id: "1",
},
render: (args) => ({
Component: Toast,
props: args,
on: {
close: action("close"),
},
}),
} satisfies Meta<Toast>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Error = {
args: {
type: "error",
},
} satisfies Story;```
and Toast.svelte:
```html
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
import HappyBeamingIcon from "../icons/HappyBeaming.svelte";
import LoadingAltIcon from "../icons/LoadingAlt.svelte";
import SadIcon from "../icons/Sad.svelte";
import ShockedIcon from "../icons/Shocked.svelte";
import XIcon from "../icons/X.svelte";
const dispatch = createEventDispatcher();
export let id: string;
export let type: "error" | "success" | "warning" | "loading";
const close = () => {
dispatch("close", id);
};
</script>