Storybook alternative for Fresh
- import plugin
// fresh.config.ts
import { defineConfig } from "$fresh/server.ts";
import tailwind from "$fresh/plugins/tailwind.ts";
+ import storiesPlugin from "https://deno.land/x/fresh_stories@0.0.4/stories-plugin.ts";
export default defineConfig({
+ plugins: [tailwind(), storiesPlugin()],
});
- Create story file
// islands/stories/Button.story.tsx
import { Button } from "../../components/Button.tsx";
export default function Stories() {
return (
<div>
<Button>
MyButton
</Button>
</div>
);
}
The Story file is a simple tsx file summarizing the usage of components.
- Story files need to be created with the name
*.story.tsx
. - Story files need to be placed inside the islands folder.